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