html - 奇怪的 "sticky footer"问题(滚动条和 div 重叠)

Question

基于 this article我想在我的元素中制作粘性页脚。请看at this link.

我不明白为什么我会得到垂直滚动条，为什么 #page div 在 #footer 下

Answer 1

您的页脚有一个 1px 的 border-top；你的容器有一个 1px 的边框；你的 nav 有一个 margin-top ......所有这些都会影响垂直高度，所以整体高度被推到超过 100% => 垂直滚动条。

当您将填充/边距设置为抵消额外像素时，您需要考虑到这一点。此外，您还为页脚元素提供了填充/边距。您应该做的是使用页脚元素作为包装器，然后在其中创建一个具有适当填充/边距的元素。

以下是如何让它发挥作用...

1 将 #nav 样式更改为 padding: padding: 10px 0 0 0;

2 去掉 #container

上的 1px 边框

3 将您的页脚更改为此...

<div id="footer">
  <div id="footer-content">
    © 2012 Code Arts
  </div>
</div>

4 将您的页脚 css 更改为:

#footer {
  border-top: 1px solid #C9E0ED;
  height: 53px; /* 20px padding-top + 20px padding-bottom + 13px line-height */
  margin-top: -54px; /* height + 1px border-top */
  position: relative;
  clear: both;
}
#footer-content {
  font-size: 13px;
  line-height: 13px;
  text-align: center;
}