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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/rainbow702/article/details/50518068

在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
展开阅读全文

没有更多推荐了,返回首页