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

阅读更多

在WEB开发过程中,有些需求要求DIV的高度随着浏览器窗口的改变而改变。

这里我就列举两种情况:

① 顶部为一排菜单栏,下部为内容部。其中,要求,菜单栏高度固定,内容部随着浏览器窗口大小的改变而改变,示意图如下:


HTML/CSS中,DIV高度自适应的解决方法_第1张图片
 这种需求的处理的话,可按照如下的CSS来处理:

menu bar
content

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


HTML/CSS中,DIV高度自适应的解决方法_第2张图片
  这种需求的处理的话,可按照如下的CSS来处理:

search result
option button

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

  • HTML/CSS中,DIV高度自适应的解决方法_第3张图片
  • 大小: 19.8 KB
  • HTML/CSS中,DIV高度自适应的解决方法_第4张图片
  • 大小: 22.3 KB
  • 查看图片附件

你可能感兴趣的:(html,css,div,自适应)