我们在进行页面架构的时候，一般会分成三个section：header、body、footer。如下面这个页面：
这个时候我们就需要对body部分进行最小高度设置，才能避免footer部分出现在页面中间的情况。比方说下面在这个写法：
.page-content-header {
min-height: 5%;
}
.page-content-body {
min-height: 100%;}
.page-content-footer {
min-height: 5%;}这样的写法会让body部分有个充满页面大小的高度，footer部分自然会在页面的最低端，而且当body部分的内容超出了100%时，高度会自动撑开，不会出现溢出的情况。
但是，问题来了，火狐浏览器不兼容这种写法，min-height：100% 完全不生效，我们可以用以下方法来进行兼容：
立即学习“前端免费学习笔记（深入）”；
海霆企业网站系统(HT-EWCMS)1.1
下载
HT-EWCMS 为 Hetty - Enterprise Web Content Management System 的英文缩写，即海霆企业网站内容管理系统，HT-EWCMS为您提供一个高效快速和强大的企业网站解决方案，兼容各种主流操作系统和浏览器。HT-EWCMS著作权已在中华人民共和国国家版权局注册，海霆科技为 HT-EWCMS 产品的开发商，依法独立拥有 HT-EWCMS 产品著作权，著作
.page-content-body {
min-height: 100%;
/*火狐兼容*/
min-height: 600px !important;}
.page-content-body:after {
content:"";
visibility:hidden;
display:block;
clear:both;
height:0px;}首先我们用 !important 来对火狐浏览器做hack，设置一个最小高度600px，然后利用伪元素 :after来做样式清除，以达到当内容超出最小高度时，高度会相应增加的目的。
我们设置显示框类型display为块级元素block，设置clear为左右两侧都不允许浮动元素，我们插入的生成内容content为空，然后设置高度为0，将元素设置为不可见。
这样就能让Firefox也能实现最小高度和内容超出自适应了。
