html - 实现停靠页脚的最有效和兼容的方式

Question

我正在尝试在 CSS 模板中执行以下操作：

1. 当没有足够的内容来填充页面时，将页脚停靠在底部
2. 在整个宽度上拉伸页眉和页脚背景
3. 将所有内容放在页面中间

这是我的代码，在此处的帮助下创建：http: //tinkerbin.com/lCNs7Upq

我的问题是，我已经看到了一些实现这一目标的方法。这是最好的吗？还必须有空的 div 似乎很可惜，这是一个麻烦吗？

Answer 1

您可以使用 CSS 修复和元素到页脚：

position: fixed;
bottom: 0;

但是，我试图弄清楚你到底想做什么。

如果它是一个 div，你的页眉和页脚应该自动 100% 跨页。

您的中间部分可以设置为 height: auto; 通过 css 将填充视口，将页脚一直推到底部，但要做到这一点，您还必须将 body 设置为 100% 才能使其工作。

html, body, #content {
    height: 100%;
    min-height: 100%;
}
#header {
    height: 100px;
    width: 100%;
    background: blue;
    position: fixed;
    top: 0;
}
#content {
    height: auto;
    margin: 100px auto;
    background: green;
}
#footer {
    position: fixed;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: red;
}

您的 HTML 应该看起来像这样：

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

工作示例：http: //jsfiddle.net/s4rT3/1/

Answer 2

这是我见过的最好的例子：

http://css-tricks.com/snippets/css/sticky-footer/

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}

<div class="page-wrap">
  
  Content!
      
</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

更新：在 2019 年使用 flex 是一个更好的选择。