上下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的方式实现上下固定中间自适应的代码实现。