理解 height 百分比

相对于父元素的高度根据百分比计算高度。如果父元素没有设置高度或者父元素高度百分比不生效，则无法计算自己的高度。当没有给父元素设置高度或父元素高度百分比不生效时，父元素高度由子元素高度决定。

html 的父元素可以理解成 window，浏览器会将 html 填充完整个浏览器窗口：

当 html 高度设置为具体像素值或百分比时：

• html 高度大于浏览器窗口高度：会出现滚动条；
• html 高度大于浏览器窗口高度：浏览器同样会将 html 填充完整个浏览器窗口；

但是 html 的子元素高度设置成百分比时，会按照 html 实际设置的高度值来计算百分比。

<style>
    html {
        height: 50%;
        background-color: yellowgreen;
    }
    body {
        height: 100%;
        background-color: white;
    }
    .parent {
        height: 50%;
        background-color: cadetblue;
    }
</style>
<div class="parent"></div>

效果：

将 html 高度设置为 200px ，效果如下：

当 html 高度大于浏览器窗口高度时，会出现滚动条：

<style>
    html {
        height: 150%;
        background-color: yellowgreen;
    }
    body {
        height: 100%;
        background-color: white;
    }
    .parent {
        height: 50%;
        background-color: cadetblue;
    }
</style>
<div class="parent"></div>

效果：

如果父元素没有设置高度或者父元素高度百分比没有生效，那么子元素的高度百分比不会生效：

<style>
    body {
        height: 50%;
        background-color: yellowgreen;
    }
    .parent {
        height: 100%;
        background-color: cadetblue;
    }
</style>
<div class="parent">html 没有设置高度</div>

这里没有 html 高度，因此 body 的高度规则跟 html 类似，但是这里的 body 实际高度为 0，所以 parent 的高度百分比不生效，其高度由子元素决定。

效果：

参考：理解 height 百分比