html - 子 div 无法获得 100% 的高度

Question

我正在尝试将容器制作为我身体高度的 100%，然后我想要一个标题和 textarea 块分别为该高度的 10% 和 90%。

这是我的结果和代码的小提琴：JSFiddle

请注意，标题仅因填充而出现。

同样在我的 chrome explorer 容器中，没有像上面的小提琴那样获得 100% 的身体高度。

HTML：

<div id="container">
    <div id="header"></div>
    <textarea autofocus id="textarea"></textarea>
</div>

CSS：

html, body {
    height: 100%;
}
#container {
    min-width: 240px;
    min-height: 100%;
}
#header {
    height: 10%;
    background: blue;
    width: 100%;
    padding: 22px 0 0 0;
    margin: 0 auto;
}
#textarea {
    background: yellow;
    line-height: 1.5em;
    width: 100%;
    height: 90%;
}

Answer 1

您尚未添加height: 100%;到您的#container.

此外，如果您向宽度或高度为 100% 的元素添加填充，则该元素将溢出。
您应该向子元素添加填充来解决此问题。

Answer 2

div 是一个块元素，它只占用其内容的高度。因此，如果您希望它太大，则需要将高度值放在 px 中而不是 % 中。所以在你的情况下尝试

html, body {
height: 500px;

}

和

height: 800px;