css 小经验： 垂直，上下定高，中间自适应

　　今天因需求做了个css样式，要求一个div中，上下高度固定，中间自适应。

　　下面见样码：

<div id=container>
 <div id="top">上部固定高度100px</div>
 <div id="middle">中部自适应高度</div>
 <div id="bottom">底部固定高度100px</div>
</div>

 

/*  css file */

#container{
 width: 100%;
 height: 100%;
 position: relative;
}

#top{
 width: 100%;
 height: 100px;
 position: absolute;
 top: 0;
 left:0;
}

#middle{
 width: 100%;
 height: 100px;
 position: absolute; //使用绝对定位来实现自适应
 top: 100px;
 bottom:100px;
}

#bottom{
 width: 100%;
 height:100px;
 position:absolute;
 bottom: 0;
 left: 0;
}