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;
}

實現效果，中間黃色的部分可以根據瀏覽器的高度大小進行高度自適應