你完成了

Question

HTML：

<div id="header">
<div class="container"></div>
</div>

<div id="content">
<div class="container"></div>
</div>

<div id="footer">
<div class="container"></div>
</div>

CSS：

.container {
margin: 0 auto;
overflow: hidden;
width: 960px;
}

我希望页脚保留在页面底部（不是持久），这样无论页面高度如何，它都会保留在底部。

如何使用当前结构实现这一目标？

Answer 1

我没有测试过这个css，但我认为它会做你想要的：

html {
  width: 100%;
  height: 100%;
}
body {
  position: relative;
  width: 100%;
  height: 100%;
}
#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

width / height属性确保body始终至少为视口的高度。然后，您可以绝对将页脚放在其中以使其位于底部。如果身体的内容结束，身体会长大，页脚会停留在身体的底部。

现在，存在一个缺点：页脚可能与身体内容的最后一位重叠。要解决此问题，您可以将此CSS添加到正文：

body {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-bottom: 40px;
}

将40px替换为您的页脚大小。通过设置padding-bottom，我们为页脚保留了该空间。 box-sizing属性确保此40px（或任何正确的数字）从该身高自身保留，而不是在底部添加。基本上，当页面自然不需要滚动时，它会阻止垂直滚动条出现。

Answer 2

你完成了

它已经位于“整个”页面的底部。无需额外的款式。 see it on jsfiddle，其中包含容器元素的背景颜色以及其中的一些示例内容。

我还建议您使用更具语义的html标记

<header>
    <!-- ... -->
</header>
<div id="content">
    <!-- ... -->
</div>
<footer>
    <!-- ... -->
</footer>

考虑到以下结构，如何保持页脚停靠在页面底部？

2 个答案:

你完成了