上下DIV固定,中間DIV自適應的HTML+CSS實現

項目快結了，所以就做一下總結，以便以後複習。
項目主頁的左側菜單部分，界面要求就是上方爲項目logo以及顯示用戶，下方需要顯示版權，中間部分就是顯示菜單選項。廢話不多說，直接上代碼。

HTML:
<div class='header'></div>
<div class='middle_outer'>
<div class='middle_inner'></div>
</div>
<div class='footer'></div>

CSS:
.header{
position:absolute;
top:0px;
height:268px;/*高度可以不寫，可以通過內部元素撐開，但是需要考慮是否會與自適應部分發生重合*/
width: 182px;/*寬度是必要，如果沒有寬度就無法撐出div*/
}
.middle_outer{
position:absolute!important;
position:relative;
top:268px!important;/*header部分的高度*/
top:0;
bottom:52px;/*footer部分的高度*/
width:182px;
overflow:hidden;/*外層div不滾動，而是內層div滾動，實現自適應*/
height:auto!important;
height:100%;
}
.middle_inner{
height:100%;
overflow-y:auto;/*當內容超出後，就會出現滾動條*/
}

以上就是通過HTML+CSS的方式實現上下固定中間自適應的代碼實現。