紧贴底部的页脚

我们的难题

       在网页设计中，存在一个相当古老而又相当常见的问题，它是前端工程师绕不开的坎。这个问题可以概括如下：有一个具有块级样式的页脚（比如它设置了背景或者阴影），当页面内容足够长时，它一切正常，而当页面较短时，就会出现问题。此时的问题在于页脚不能向我们期望的那样紧贴在视口的最底部，而是跟随在内容的下方。

我之前的解决方案

我是利用了脚本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+可以尝试这个霸气的方案；