您的位置：首页 > 其它

上下Div固定，中间div高度自适应（随浏览器高度变化而变化）

2015-10-03 15:56 489 查看

1.css代码：

<span style="font-family:Microsoft YaHei;"><style>
html,body{
margin:0;
padding:0;
height:100%;
overflow:hidden;
}
#top{
position:absolute;
top:0;
left:0;
background-color:#05C020;
height:50px;
width:100%;
z-index:100;
}
#bottom{
position:absolute;
bottom:0;
left:0;
background-color:#88D6E9;
height:50px;
width:100%;
z-index:100;
}

#middle{
position:absolute;
width:100%;
overflow:auto;
background-color:#F0E6A2;
bottom:50px;
top:50px;
_height:100%;
_border-top:50px solid #eee;
_border-bottom:50px solid #eee;
_top:0px;
z-index:90;
}
#middle p{margin:0;}
</style></span>

2.Html代码：

<span style="font-family:Microsoft YaHei;"><body>
<div id="all">
<div id="top">top</div>
<div id="middle">
<p>有句话说，若可安逸，谁愿奔波。确实如此，但是如果你是一个年轻人，还是建议你，别那么早的就想安逸。还是趁着年轻，多折腾几下有时候总觉得，在这个拼爹拼背景的年代，没有什么背景的年轻人挺辛苦的。什么都需要自己去努力，去争取。有时候别人伸手就能做到的事情，我们却需要去拼搏了好久，才能够拥有，而且有时候拥有的，可能还没有别人那么好吧。</p>
</div>
<div id="bottom">bototm</div>
</div>
</body></span>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航