《CSS世界》读书笔记（五） --height:100%

<!-- 《CSS世界》 张鑫旭著 -->

相对简单而单纯的height:auto

height:auto比width:auto简单的多，原因在于：

CSS默认流是水平方向的，宽度是稀缺的，高度是无限的。因此，宽度的分配规则比较复杂，高度就显得随意的多。

此外，height:auto也有外部尺寸特性。其可能只存在于绝对定位模型中，也就是“格式化高度”？？。

关于height:100%

对于width属性，就算父元素width为auto，其百分比值也是支持的。但是，对于height属性，如果父元素height为auto，只要子元素在文档流中，其百分比值完全被忽略了。

为何父级没有具体高度值的时候，height:100%会失效？

从示例来说明：（详见：http://demo.cssworld.cn/3/2-10.php）

<div class="box">
    <img src="1.png">
    <span class="text">红色背景是父级</span>
</div>
.box{
    display: inline-block;
    white-space: nowrap;
    background-color: red;
}
.text{
    display: inline-block;
    width: 100%;
    background-color: blue;
}

先了解浏览器渲染的基本原理：

首先下载文档内容，加载头部的样式资源（如果有的话），然后按照从上而下、自外而内的顺讯渲染DOM内容。也就是会先渲染父元素，后渲染子元素。因此，当渲染到父元素的时候，子元素的width:100%并没有渲染，宽度就是图片加文字内容的宽度；当渲染到子元素的时候，父元素宽度已经固定，此时的width:100%就是已经固定好的父元素的宽度。

那为什么宽度支持，高度不支持呢？规范中给出了答案：如果包含块的高度没有显示指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto。也就是'auto'*100/100 = NaN。

但是如果包含块的宽度取决于该元素的宽度，那么产生的布局在CSS2.1中是未定义的，属于“未定义行为”，浏览器可以自己去发挥，根据作者的测试，布局效果在各个浏览器下是一致的。

如何让元素支持height:100%效果

有两种方法：

（1）设定显示高度值。

（2）使用绝对定位

div {
    height: 100%;
    position: absolute;
}

此时的height:100%就会有计算值，即使祖先元素的height计算值为auto也是如此。需要注意的是：绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的，区别在于绝对定位的宽高百分比计算是相对于第一个position不为static的祖先元素（或根元素）的padding box的，也就是说会把padding大小值计算在内，但是，非绝对定位元素是相对于content box计算的。