父元素没有具体高度值，子元素设置 `height: 100%;` 无效先了解浏览器渲染的基本原理：先下载文档，加载头部样

先了解浏览器渲染的基本原理：先下载文档，加载头部样式资源（如果有），然后按照从上而下、自外而内的顺序渲染 DOM 内容。比如，有如下代码：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .father {
        display: inline-block;
        background-color: red;
        white-space: nowrap
      }
      .text {
        display: inline-block;
        width: 100%;
        background-color: green;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <img src="lufei.jpg">
      <span class="text">落霞与孤鹜齐飞</span>
    </div>
  </body>
</html>

结果：对上述示例，浏览器就会先渲染父元素，后渲染子元素。所以，当渲染父元素时，子元素的 width: 100% 并没有渲染。此时，父元素的宽度就是图片的宽度加上文字内容的宽度。等渲染子元素时，父元素宽度已经固定，此时子元素 width: 100% 就是已经固定好的父元素的宽度。如果父元素宽度不够，子元素直接溢出就好了。

同样地，如果 height 支持任意元素 100%，也会和宽度类似，静态渲染，一次到位。但规范中规定：如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为 auto。而 auto 和百分比进行计算，肯定是计算不了的：auto * 100/100 = NaN。所以父元素无具体高度值时，子元素 height 设置百分比是无效的。