上下DIV固定,中間DIV自適應的HTML+CSS實現
阿新 • • 發佈：2019-01-07
專案快結了，所以就做一下總結，以便以後複習。
專案主頁的左側選單部分，介面要求就是上方為專案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的方式實現上下固定中間自適應的程式碼實現。