css构建绝对底部的方式

1.strick-footer

htmt,body{
  height: 100%;
  min-height:100%
}
.main{
    min-height: 100%;
    padding-bottom: 100px;
}
.footer{
    position:relative;
    margin-top: 100px
}
<div class="main"></div>
<div class="footer"></div>

原理就是一个main块 设置padding-bottom为footer的高度，且给一个最低高度100%；当main块的内容高度不够满屏时，自动撑满，footer块设置负数margin-top让其内容上移。这里适合只有上下两个块的，且固定footer块高度的场景；当footer高度不确定时就不行了。

2.利用flex布局

htmt,body{
  height: 100%;
  min-height:100%
}
.wapper{
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.main{
     flex: 1; 
    -ms-flex: 1 1 auto; /*降级处理兼容ie, 如果设置 -ms-flex:1不起作用,会让footer覆盖在main上面*/
}
.footer{
    flex-basic:auto;
}
<div class=wrapper>
    <div class="main"></div>
    <div class="footer"></div>
</div>

此时main的高度不用设置，会等于wapper的高度减去footer高度，这样就达到footer紧贴底部的效果了，比如wrapper的高度是900px,footer高度是50px,那么最终main的高度等于900-50=850px ;如果footer高度是100px; 那么main的高度 等于900-100 = 800px；

不够有个问题 当浏览器是ie时还是不行，这里做了降级处理，因为不设置main的高度，所以当main的高度小的时候，footer还是随着main排下来，这样看起来footer就不一定紧贴在页面底部了。比如wrapper的高度是900px,main高度100px,footer高度是50px,那么最终效果就是main的100px+footer的50px ;整个屏幕900px只排了150px的高度的内容,还是相当不好看的。如果设置main的高度为min-height:100%的话，又会出现上下滚动条。。。