分析div自动适应浏览器的高度

最新推荐文章于 2024-03-10 10:13:54 发布

dddddz

最新推荐文章于 2024-03-10 10:13:54 发布

阅读量5k

点赞数 2

分类专栏： web 文章标签： CSS

web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前端人员之间有一个普遍存在的问题，如何让一个div的高度自动延伸到浏览窗口100%的高度,在布局中，我们有时会用到高度自适应，例如，我们定义了一个 div，并且希望它的高度为窗口高度的100% ，那么我们该如何编写代码呢？用height:100%就可以了。但要注意的是，浏览器对css的解析方式有一点差异。我们需要弄清楚100% 到底是谁占谁的100%，让我给你另外一种方式来思考HTML，几乎每一个HTML文件都有一组容器彼此包含的。因此，在我们的页面里面，首先我们有一个<html>容器，其次<body>容器包含在<html>里，最后才是<div id=”content”></div>容器包含在里面。当我们往任何一个容器里面放置内容的时候，这个容器和包含此容器的父容器盒子都会自动延伸的，从而能容下这些新添加的内容。也就是说，当我们往<div id=”content”></div>容器盒子添加文字内容的时候，这个div容器盒子是自动延伸的，包含这个div容器的父容器盒子（body与html）依次是自动延伸的。

当我们给<div id=”content”></div>容器定义“height:100%”样式时，我们现在做的就是告诉它让其高度延伸到包含它的父容器的整个高度。这个div容器被包含在<body>容器里面，所以<div id=”content”></div>就是body的整个高度。好了，body容器是如何延伸增长的那？它就像<div id=”content”></div>的高度一样，因为我们从来没有告诉它如何增高的。所以当我们给<div id=”content”></div>定义“height：100%”样式的时候，我们仅仅告诉了它自己。

解决此问题，我需要告诉<body>容器变的大一些儿，同时<html>容器也会出现同样的问题，它应该与<body>一样大。用百分比要设置高度时，需要明确父级对象的高度。要不然浏览器会使用默认值。所以，要是实现开始所说的布局，代码应该这样写：

html ,body{height:100%;}
#wrapper（div）{height:100%;}
也就是让div的父级对象的高度确定为窗口的100%。因为html 和body 的默认值在ie和ff下并不都是100%。这样问题就可以解决了。

转自： http://www.nnit30.com/news/news.asp?ArticleID=5698