我的页面底部有一个空白 - 但仅限于Chrome。我尝试了很多东西,主要来自这个问题和答案here。
我很确定这是一个整体的身体问题 - 我在身体上放了一个border-bottom: 2px solid red;
规则,它来到了白色空间之上。
这是我的身体和页脚的样式代码 -
body {
display: flex;
min-height: 100vh;
flex-direction: column;
margin-bottom: 6rem;
font-family: 'GothamLight', sans-serif !important;
font-size: 16px !important;
border-bottom: 2px solid red;
}
footer {
margin-top: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: auto;
width: auto;
background-color: black;
}
footer #email {
text-align: center;
color: white;
/* font-weight: bold; */
padding-top: 50px;
font-size: small;
}
p #email {
padding: 10px;
}
footer #socialmedia {
text-align: center;
position: relative;
top: 75%;
}
那里有什么可能导致它吗?如前所述,Firefox和/或Safari中没有问题 - 只有Chrome。它发生在网站的所有页面上。我如何解决它?
它看起来像填充问题,通过更改检查填充,并通过删除相对位置来检查。认为它从任何CSS文件中获取填充。
页脚#socialmedia {
text-align: center;
position: relative;// remove it than check
top: 75%;
}
在社交媒体Div中使用cssclass,然后在css中调用它,这样就可以相应地设置社交媒体图标。
我在谷歌上做了更多的挖掘,并从here找到答案。
所以现在我只在我的页脚样式规则中包含overflow: hidden;
并删除空格。