参见英文答案 >
How can a variable-height sticky footer be defined in pure CSS?4个
我需要保持底部的底部,但其高度是可变的,所以主要的解决方案不适合我…
我需要保持底部的底部,但其高度是可变的,所以主要的解决方案不适合我…
我不能做的例子：
http://www.cssstickyfooter.com/
http://matthewjamestaylor.com/blog/bottom-footer-demo.htm
任何人都有灵活页脚的解决方案？
谢谢
解决方法
2014年更新：解决这个布局问题的现代方法是
use the
flexbox CSS model.所有主流浏览器和IE11都支持.
这是一个使用带显示的div的灵活高度的粘性页脚的解决方案：table-row：
html,body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
background: yellow;
}
.content {
display: table-row;
/* height is dynamic,and will expand... */
height: 100%;
/* ...as content is added (won't scroll) */
background: turquoise;
}
.footer {
display: table-row;
background: lightgray;
}
<div class="wrapper">
<div class="content">
<h2>Content</h2>
</div>
<div class="footer">
<h3>Sticky footer</h3>
<p>Footer of variable height</p>
</div>
</div>
需要注意的是,CSS旨在布局文档,而不是Web应用程序屏幕. CSS显示：表属性虽然非常有效,但在all major browsers中得到支持.这与使用布局的结构表不同.
