上下Div固定，中间div高度自适应（随浏览器高度变化而变化）
生活随笔
收集整理的這篇文章主要介紹了
上下Div固定，中间div高度自适应（随浏览器高度变化而变化）
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
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>有句話說(shuō)，若可安逸，誰(shuí)愿奔波。確實(shí)如此，但是如果你是一個(gè)年輕人，還是建議你，別那么早的就想安逸。還是趁著年輕，多折騰幾下有時(shí)候總覺(jué)得，在這個(gè)拼爹拼背景的年代，沒(méi)有什么背景的年輕人挺辛苦的。什么都需要自己去努力，去爭(zhēng)取。有時(shí)候別人伸手就能做到的事情，我們卻需要去拼搏了好久，才能夠擁有，而且有時(shí)候擁有的，可能還沒(méi)有別人那么好吧。</p></div><div id="bottom">bototm</div> </div> </body></span>
總結(jié)
以上是生活随笔為你收集整理的上下Div固定，中间div高度自适应（随浏览器高度变化而变化）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： html图片轮播replace,Java
- 下一篇： 如何在迅捷CAD编辑器上修改快捷键