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

Question

我正在尝试制作一个占我 body 高度 100% 的容器，然后我想要一个 header 和 textarea block 分别占该高度的 10% 和 90%。

这是我的结果和代码的一部分:JSFiddle

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

同样在我的 chrome 资源管理器容器中没有像上面的 fiddle 那样获得 100% 的 body 高度。

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% 的元素添加填充，该元素将溢出。
您应该向子元素添加填充来解决这个问题。