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;

儿童divs未达到100％的高度

2 个答案: