我们的难题
在网页设计中,存在一个相当古老而又相当常见的问题,它是前端工程师绕不开的坎。这个问题可以概括如下:有一个具有块级样式的页脚(比如它设置了背景或者阴影),当页面内容足够长时,它一切正常,而当页面较短时,就会出现问题。此时的问题在于页脚不能向我们期望的那样紧贴在视口的最底部,而是跟随在内容的下方。
我之前的解决方案
我是利用了脚本js控制了页面主要内容(main)的高度,让它最小 = 屏幕的高度 - 其他兄弟元素的高度;大概如下:
var minHeight = $(window).height() - $(".header").outerHeight(true) - $(".footer").outerHeight(true) - $(".banner").outerHeight(true); $('.main').css({'min-height' : minHeight + 'px'});
CSS揭秘的方案
看看我们如果只用css有什么好的办法。
1、
main { min-height: calc(100vh - 2.5em - 7em); /* 避免内边距或边框搞乱高度的计算: */ box-sizing: border-box; }
它上面的2.5em和7em也是头部和页面底部的高度,和我的js一个套路。但是这个不够灵活当你页面头部和底部有变更,你要跟着调整min-height的值。ie9+(calc,vh, box-sizing)也算是一个方法;
2、
body{
display: flex;
flex-flow: column;
min-height: 100vh;
}
.main{
flex: 1;
}
Flexbox对于此类问题是完美的选择。不需要复杂的计算和添加多余的HTML元素;
body是三个主要区域块的父元素,页头和页脚的高度由其内部因素来决定,而内容区的高度自动伸展并占满所有的可用空间,ie11+可以尝试这个霸气的方案;