css高度100％

Question

为什么第二个div高度不是100px？

现在很长......

<div style = "height: 300px;">
    <div style = "height: 300px; background-color: #000;">
        <div style = "height: 200px;">
                 First div
        </div>
        <div style = "height: 100%; background-color: #336699;">
                 Seconf div
        </div>
    </div>
</div>

Answer 1

因为你有100％不是100px。

Answer 2

height: 100%;没有填满余下的空间，它需要100％的父<div>，即300px。你为什么不用100px？

Answer 3

因为100%表示“父元素高度的100％”而不是“在其他所有元素都被占用之后，父元素中剩余100％的空间”

Answer 4

它是父div的高度的100％ - 在这种情况下是300px而不是100。