上下固定中间滚动布局(flex/absolute)

好久没更新简书啦，最近真的是忙懵B了，赶紧记录一下知识点：

html:

<div class="wrap">
      <div class="header">header</div>
      <div class="main">
       弹性滚动区域
      </div>
      <div class="footer">footer</div>
</div>

flex实现上下固定中间滚动布局

css:

*{
    margin:0;
    padding:0;
}
html,body{
    height:100%;
}
.wrap{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
    width:100%;
    height:100%;
}
.header,.footer{
    height:40px;
    line-height:40px;
    text-align: center;
    background-color:#D8D8D8;
    text-align:center;
}
.main{
    -webkit-box-flex:1;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    width:100%;
    padding:10px;
    box-sizing: border-box;
}

position:absolute实现上下固定中间滚动布局

css:

*{ padding:0; margin:0; }
html,body{height:100%;}
.wrap{width:100%;}
.header,.footer{height:40px;line-height:40px;background-color:#D8D8D8;text-align:center;}
.header{position: absolute;top:0;left:0;width:100%;}
.footer{position: absolute;bottom:0;left:0;width:100%;}
.main{position:absolute;z-index:1;top:40px;left:0;bottom:40px;width:100%;}

点击查看原文