css div高度设置100%如何生效！
css div高度设置100%如何生效！
div {
width: 100%; /* 这是多余的 */
height: 100%; /* 这是无效的 */
background: url(bg.jpg);
}
然后他发现这个<div>高度永远是 0，哪怕其父级<body>塞满了内容也是如此。事实上，他需
要如下设置才行：
html, body {
height: 100%;
}
并且仅仅设置<body>也是不行的，因为此时的<body>也没有具体的高度值：
body {
/* 子元素 height:100%依旧无效 */
}
只要经过一定的实践，我们都会发现对于普通文档流中的元素，百分比高度值要想起作用，
其父级必须有一个可以生效的高度值！但是，怕是很少有人思考过这样一个问题：为何父级没
有具体高度值的时候，height:100%会无效？
1．为何 height:100%无效
有一种看似合理的说法：如果父元素 height:auto 子元素还支持 height:100%，则
父元素的高度很容易陷入死循环，高度无限。例如，一个 <div>元素里面有一张
vertical-align 为 bottom 同时高度为 192 像素的图片，此时，该<div>高度就是 192
像素，假设此时插入一个子元素，高度设为 100%，如果此时 height:100%可以计算，则
子元素应该也是 192 像素。但是，父元素 height 值是 auto，岂不是现在高度要从原来的
192 像素变成 384 像素，然后 height:100%的子元素高度又要变成 384 像素，父元素高度
又双倍……死循环了！
实际上，这种解释是错误的，大家千万别被误导。证据就是宽度也存在类似场景，但并没
有死循环。例如，在下面这个例子中，父元素采用“最大宽度”，然后有一个 inline-block
子元素宽度 100%：
<div class="box">
<img src="1.jpg">
<span class="text">红色背景是父级</span>
</div>
.box {
display: inline-block;
white-space: nowrap;
background-color: #cd0000;
} 3.2 width/height 作用的具体细节
35
.text {
display: inline-block;
width: 100%;
background-color: #34538b;
color: #fff;
}
如果按照上面“高度死循环”的解释，这里也应该“宽度死循环”，因为后面的 inline-block
元素按照我们的理解应该会让父元素的宽度进一步变大。但实际上并没有，宽度范围可能超出
你的预期（见图 3-24）。父元素的宽度就是图片加文字内容的宽度之和。
手动输入 http://demo.cssworld.cn/3/2-10.php 或者扫右侧的二维码。
图 3-24 宽度为图片加文字内容的宽度之和
为什么会这样表现呢？
要明白其中的原因要先了解浏览器渲染的基本原理。首先，先下载文档内容，加载头部的
样式资源（如果有的话），然后按照从上而下、自外而内的顺序渲染 DOM 内容。套用本例就是，
先渲染父元素，后渲染子元素，是有先后顺序的。因此，当渲染到父元素的时候，子元素的
width:100%并没有渲染，宽度就是图片加文字内容的宽度；等渲染到文字这个子元素的时候，
父元素宽度已经固定，此时的 width:100%就是已经固定好的父元素的宽度。宽度不够怎么
办？溢出就好了，overflow 属性就是为此而生的。
同样的道理，如果 height 支持任意元素 100%，也是不会死循环的。和宽度类似，静态
渲染，一次到位。
那问题又来了：为何宽度支持，高度就不支持呢？规范中其实给出了答案。如果包含
块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为
auto。一句话总结就是：因为解释成了 auto。要知道，auto 和百分比计算，肯定是算
不了的：
'auto' * 100/100 = NaN
但是，宽度的解释却是：如果包含块的宽度取决于该元素的宽度，那么产生的布局在 CSS 2.1
中是未定义的。
还记不记得本书第 2 章最后的“未定义行为”吗？这里的宽度布局其实也是“未定义行为”，
也就是规范没有明确表示该怎样，浏览器可以自己根据理解去发挥。好在根据我的测试，布局
效果在各个浏览器下都是一致的。这里和高度的规范定义就区别明显了，高度明确了就是 auto，
高度百分比计算自然无果，width 却没有这样的说法，因此，就按照包含块真实的计算值作为
百分比计算的基数。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
