顶部和底部固定高度，中间高度自适应的布局

html代码

<div id="all">
        <div id="top">top</div>
        <div id="content"></div>
        <div id="bottom">bottom</div>   
</div>

css代码

*{
   margin:0;
    padding:0;
 }
#top{
    position:absolute;
    top:0;
    left:0;
    background-color:#05C020;
    height:50px;
    width:100%;
    z-index:100;
}
#bottom{
    position:absolute;
    bottom:0;
    left:0;
    background-color:#88D6E9;
    height:50px;
    width:100%;
    z-index:100;
}

#middle{
    position:absolute;
    width:100%;
    overflow:auto;
    background-color:#F0E6A2;
    bottom:50px;
    top:50px;
    /* height:100%;
    border-top:50px solid #eee;
    border-bottom:50px solid #eee;
    top:0px; */
    z-index:90;
}

实现效果，中间黄色的部分可以根据浏览器的高度大小进行高度自适应