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

Question

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

当我说“粘性页脚”时，我将其理解为“不高于视口底部的页脚，但如果有足够的内容，它将被隐藏，直到用户滚动为止”的通用定义。下降到足以看到它的程度。”

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

Answer 1

这里的所有其他解决方案都已过时，并且使用JavaScript或table黑客手段。

随着CSS flex模型的问世，解决高度可变的粘性页脚问题变得非常非常容易：尽管以在水平方向上布局内容而著称，但Flexbox对于垂直布局问题也同样有效。您所要做的就是将垂直部分包装在flex容器中，然后选择要扩展的部分。他们会自动占用容器中的所有可用空间。

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

当前使用的96％以上的浏览器都支持flex模型。

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>