Question

我正在尝试发布我的投资组合网站，我差不多完成了，但是当我有足够的内容需要向下滚动时，我的粘性页脚覆盖内容时遇到问题。我整个下午都尝试过填充填充和边距，但我似乎仍然无法按照我想要的方式使用它。

基本HTML骨架：

<body>
  <header>
   <nav>
   </nav>
   </header>
  <div id="wrapper">
   <section>
    <ul id="gallery">
      <li>
      </li>
    </ul>
  </section>
  </div>
 <footer>
 </footer>
</body>

页脚：

  footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 0.425em;
  text-align: center;
  clear: both;
  padding-top: 10px;
  color: #ccc;
  border-top: 5px solid #cc7a00;
 }

任何帮助将不胜感激！

Answer 1

在检查上面提到的页面上的HTML后，看起来您可能有一些未清除的浮动。您可以阅读有关浮动的更多信息以及为什么需要在此处清除它们：https://css-tricks.com/the-how-and-why-of-clearing-floats/。

简短的回答是包装器没有增加其尺寸以包含其子代因为那些浮动。如果使用开发工具检查页面，则可以看到包装器基本上没有高度。这意味着为它添加一个保证金实际上并没有做任何事情。

如果您尝试向页脚本身添加页边距和填充，那么由于您使用的是position:fixed，因此无效。您已经告诉它要坚持页面底部而不影响页面上的其他内容。让内容在页脚下滚动并仍然让它有一个推送其他内容的边距是没有意义的，对吗？

有很多方法可以解决这个问题。这是一个 -

要解决浮动问题，可以使用overflow:auto技巧：

#wrapper {
  overflow:auto;
}

阅读更多关于overflow:auto的信息并在这里浮动：Why does 'overflow: auto' clear floats? And why are clear floats needed?请注意这并不能真正清除花车，但效果是包装纸的高度会响应它的孩子，这就是我们真正需要的

然后在包装器div的底部添加一些额外的边距以考虑页脚的高度应该有效：

#wrapper {
  overflow:auto;
  margin: 0 auto 100px auto;
}

上述保证金属性将保证金最高设置为0px，保证金权限设置为自动，保证金最低设置为100px，保证金权限保留为自动。我建议这是因为您链接到的页面已经有margin: 0 auto;（页边距顶部和底部0，左边距和右边距自动）以使页面中的包装器居中。否则，如果您只需要调整底部的空间，则可以使用margin-bottom: 100px;

Answer 2

尝试添加

padding-bottom: 97px;

到你的HTML元素

修改

html { padding-bottom: 97px; }

97px是页脚的高度。

Answer 3

在<div id="wrapper">添加到CSS：bottom : someValueMatchingTheFooterHeight;

粘性页脚覆盖内容

3 个答案:

有很多方法可以解决这个问题。这是一个 -