Question

基于this article想要在我的项目上粘贴页脚。请看一下at this link.

我无法理解为什么我会得到垂直滚动条，为什么#page div位于#footer

之下

Answer 1

你的页脚有一个1px的边框顶部;你的容器有1px的边框;你的导航有一个边缘顶部...所有这些都会影响垂直高度，所以整体高度被推到100％以上=＆gt;垂直滚动条。

当您将填充/边距设置为偏移额外像素时，您需要考虑到这一点。此外，您正在给页脚元素填充/边距。你应该做的是使用页脚元素作为包装，然后用适当的填充/边距在其中创建一个元素。

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

将#nav个样式更改为填充：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;
}

Answer 2

试试这个：

z-index: 2;

... #footer。

此外，世界上什么是margin-top：-32767px;应该做的！？

奇怪的“粘性页脚”问题

2 个答案: