在WEB开发过程中，有些需求要求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 >
② 网页上部用于显示搜索结果，下部是一些操作按钮，其中，要求，按钮行高度固定，搜索结果部随着浏览器窗口大小的改变而改变，示意图如下：
这种需求的处理的话，可按照如下的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" 的用法。
大小: 19.8 KB 大小: 22.3 KB 查看图片附件
