css - 如何在纯 CSS 中定义可变高度的粘性页脚？

Question

这里要注意的关键是页脚的高度不是固定的，而是会随着内容的变化而变化。

当我说“粘性页脚”时，我将其理解为“永远不会高于视口(viewport)底部的页脚，但如果有足够的内容，它将被隐藏直到用户向下滚动到足以看到它。”

另请注意，我不需要支持旧版浏览器。如果 CSS display: table 和相关属性在这里有所帮助，那么它们就是公平的游戏。

Answer 1

这里的所有其他解决方案都已过时，要么使用 JavaScript，要么使用 table hacks。

随着 CSS flex model 的出现，解决可变高度的粘性页脚问题变得非常非常容易:虽然 Flexbox 主要以水平方向布局内容而闻名，但实际上 Flexbox 也适用于垂直布局问题。您所要做的就是将垂直部分包裹在一个 flex 容器中，然后选择要扩展的部分。它们会自动占用其容器中的所有可用空间。

注意标记和 CSS 是多么简单。没有表格黑客或任何东西。

flex 模型是supported by 96%+ of the browsers今天在使用。

html, body {
  height: 100%;
  margin: 0; padding: 0;  /* to avoid scrollbars */
}

#wrapper {
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}

#header {
  background: yellow;
  height: 100px;  /* can be variable as well */
}

#body {
  flex: 1;
  border: 1px solid red;
}

#footer{
  background: lime;
}

<div id="wrapper">
  <div id="header">Title</div>
  <div id="body">Body</div>
  <div id="footer">
    Footer<br/>
    of<br/>
    variable<br/>
    height<br/>
  </div>
</div>