上下Div固定，中间div高度自适应（随浏览器高度变化而变化）
生活随笔
收集整理的這篇文章主要介紹了
上下Div固定，中间div高度自适应（随浏览器高度变化而变化）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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>
總結
以上是生活随笔為你收集整理的上下Div固定，中间div高度自适应（随浏览器高度变化而变化）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html图片轮播replace,Java
- 下一篇： 前端之ps切片