读书人

HTML/CSS中DIV高度自适应的解决办法

发布时间: 2013-07-08 14:13:00 作者: rapoo

HTML/CSS中,DIV高度自适应的解决方法

?这种需求的处理的话,可按照如下的CSS来处理:

<div style="height: 100px; background: gray;">  menu bar</div><div style="position:absolute; width:100%; top:100px; bottom:0px; background: cyan;">  content</div >

?② 网页上部用于显示搜索结果,下部是一些操作按钮,其中,要求,按钮行高度固定,搜索结果部随着浏览器窗口大小的改变而改变,示意图如下:


HTML/CSS中,DIV高度自适应的解决办法
??这种需求的处理的话,可按照如下的CSS来处理:

<div id="div1" style="position:absolute;bottom:40px; width:100%; background: gray;">  search result</div><div style="position:absolute; width:100%; bottom:20px; bottom:0px; background: cyan;">  option button</div >

?主要的,还是要理解一下 "position:absolute" 的用法。

读书人网 >CSS

热点推荐