具有未知高度的CSS粘滞页脚

Question

有没有办法在不知道页脚大小的情况下使用CSS将页脚粘贴到浏览器屏幕的底部或内容之后(取决于哪个更长)？

现在我在一个容器中使用绝对定位,该容器保持页脚和容器的最小高度为100%的内容,但如果我更改页脚,我发现必须更改容器底部的填充以匹配其高度.

Answer 1

http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/

摘要:

对于具有标题,内容区域和页脚的网站:

1. 组 html, body {height: 100%;}
2. 将你的身体(或包装div)设置为 display: table; width: 100%; height: 100%;

3. 将页眉,页脚和内容区域设置为display: table-row;.提供页眉和页脚height: 1px;,并提供您的内容区域height: auto;

   页眉和页脚都将展开以适合其内容.内容区域将扩展以适应其较大的内容或可用空间.

https://jsfiddle.net/0cx30dqf/

Answer 2

如果您愿意进入HTML5未来,可以使用flexbox ...

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
   flex: 1;
}

• 我对同一个问题的更详细的回答:如何制作一个流畅的粘性页脚(完整示例:http://jsfiddle.net/n5BaR/)

• 由flexbox解决:http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

• 来自MDN的Flexbox是什么:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes