[英]Mysterious white space on the right of my left when I scroll to the right
我正在制作我的投资组合网站,几天以来我一直在努力解决我遇到的问题......我在互联网上到处搜索,有类似的问题,但我无法解决它们(是的,但它给我带来了另一个问题)。
我的问题的屏幕截图(我指定问题不是我的导航栏的大小,当我删除它时我有同样的问题)
当我向右滚动并且窗口不是全屏时,我有一个神秘的空白区域......我尝试了所有可能的边距和填充,我发现的唯一解决方案是:
*{
overflow-x :hidden
}
除了它在整个页面上执行此操作,然后在其他元素上执行此操作时,当我不想这样做时,它会在它们超出框架时将它们切断......所以我尝试将溢出-x 单独隐藏在所有我页面的元素,但没有任何改变......它只能通过放置 * ...
我指定我使用 react 进行编码,因此 * 会削减每个组件的所有元素,这不是我想要的......我把我的代码放在下面
import React, { useEffect } from 'react';
import profil from "../../media/5847f5bdcef1014c0b5e489c.png"
import Aos from 'aos';
import "./BlocPresentation.css"
import { FaTwitterSquare } from 'react-icons/fa';
import { FaGithubSquare } from 'react-icons/fa';
import { FaLinkedin } from 'react-icons/fa';
import { RiMailFill } from 'react-icons/ri';
import "aos/dist/aos.css";
const BlocPresentation = () => {
useEffect(() => {
Aos.init()
}, []);
return (
<div className="presentation" id='accueil'>
<div className="bloc-photo-presentation"><img className="img-presentation" src={profil} alt="" />
</div>
<div className="pos-texte-presentation">
<div className="bloctexte">
<p className="Bonjour texte">Hello World,</p>
<p className="Prenom texte">Je suis Diego</p>
<p className="etudiant texte">Étudiant en développement Web</p>
</div>
</div>
<div className="div4">
<a href=''><i className="mail"><FaGithubSquare size={22} /></i></a>
<a href=''><i className="mail"><FaLinkedin size={22} /></i></a>
<a href=''><i className="mail"><FaTwitterSquare size={22} /></i></a>
<a href=''><i className="mail"><RiMailFill size={24.5} /></i></a>
</div>
</div>
);
};
export default BlocPresentation;
CSS:
.presentation {
height: 100vh;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
background-color: #1F1D2C;
padding: 0;
margin: 0;
}
.image {
height: 100vh;
}
i {
color: white;
}
.bloc-photo-presentation {
grid-area: 1 / 5 / 6 / 9;
display: flex;
justify-content: center;
align-items: center;
}
.pos-texte-presentation {
grid-area: 1 / 1 / 5 / 6;
}
.div4 {
grid-area: 5 / 1 / 6 / 6;
}
.jesuis {
font-size: 50px;
color: white;
}
.img-presentation {
border: 2px solid black;
border-radius: 55%;
width: 45%;
box-shadow: 0 0 15px 2px black;
}
.div4 {
display: flex;
justify-content: space-around;
align-items: center;
margin: 0 8vw;
}
.texte {
color: white;
text-align: left;
padding-bottom: 4px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
.textebloc {
display: flex;
align-items: center;
justify-content: center;
}
.pos-texte-presentation {
display: flex;
align-items: center;
justify-content: center;
}
.Bonjour {
font-size: 5vw;
}
.etudiant {
font-size: 2vw;
}
.Prenom {
font-size: 3vw;
}
@media screen and (max-width:450px) {
.presentation {
height: 100vh;
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(11, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
border: 1px solid black;
}
.background-presentation {
grid-area: 1 / 1 / 12 / 8;
;
z-index: -1;
background-color: #1F1D2C;
}
.image {
height: 100vh;
}
i {
color: white;
}
.bloc-photo-presentation {
grid-area: 2 / 3 / 7 / 6;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.pos-texte-presentation {
grid-area: 7 / 2 / 10 / 7;
}
.bloctexte {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.div4 {
grid-area: 10 / 4 / 11 / 8;
}
.img-presentation {
border: 2px solid black;
border-radius: 55%;
width: 140%;
box-shadow: 0 0 15px 2px black;
}
.texte {
color: white;
text-align: center;
padding-bottom: 4px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
.Bonjour {
font-size: 10vw;
}
.etudiant {
font-size: 5vw;
}
.Prenom {
font-size: 6vw;
}
}
(是的,肯定有些东西不是很干净,我是初学者;))
在 devtools 中,框内有一个小箭头。 它是“元素”左侧的第二个按钮。 ctrl + shift + c
应该热键进入它。
使用那个小选择器工具,您可以将鼠标悬停在您的网页上,悬停在悬空的神秘空白处并单击。
您现在将看到导致问题的元素。 滚动浏览 CSS 并勇敢地更改内容,直到空白消失。 祝你好运!
我终于找到了解决方案! 这是 AOS 库的“淡入淡出”……它让我有一个边距,实际上当元素出现时我没有边距。 所以我只需要对元素的父元素执行.parents { overflow-x: hidden}
就可以了! 这样就没有更多的问题了!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.