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

Posted 2023-03-21

【中文标题】考虑到以下结构，如何保持页脚停靠在页面底部？ [复制]

【英文标题】：How to keep the footer docked at the bottom of the page considering following structure? [duplicate]

【发布时间】：2013-04-25 03:14:38

【问题描述】：

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;

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

目前的结构如何做到这一点？

【问题讨论】：

你的意思是在视口的底部吗？

@laconbass 不，在“整个”页面的底部。

它已经在“整个”页面的底部了

【参考方案1】：

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

html 
  width: 100%;
  height: 100%;

body 
  position: relative;
  width: 100%;
  height: 100%;

#footer 
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

宽度/高度属性确保主体始终至少是视口的高度。然后，您可以将页脚绝对定位在其中以使其位于底部。如果 body 的内容越过，body 会变大，footer 会停留在 body 的底部。

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

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

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

【参考方案2】：

你搞定了

它已经在“整个”页面的底部。不需要额外的样式。 see it on jsfiddle，带有容器元素的背景颜色和其中的一些示例内容。

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

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