Chrome - 网站底部的空白区域

Question

我的页面底部有一个缺口 - 但仅限于Chrome。我尝试了很多东西，主要来自这个问题＆amp;回答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。它发生在网站的所有页面上。我该如何解决？

Answer 1

看起来像填充问题，通过更改检查填充，并通过删除相对位置来检查。认为它从任何css文件中获取填充。

页脚#socialmedia {

text-align: center;
position: relative;// remove it than check 
top: 75%;

}

Answer 2

在社交媒体Div中使用cssclass，然后在css中调用它，这样就可以相应地设置社交媒体图标。

Answer 3

我在谷歌上做了一些挖掘，并从here找到答案。

所以现在我只在{strong>页脚样式规则中包含overflow: hidden;，它会删除空格。