html - 使元素填充其容器中剩余的垂直空间的正确方法是什么

Question

我有一个设置高度的 div，它将容纳任意元素和另一个我希望填充剩余空间的 div，以便填充 div。 jsfiddle

html:

<div class=container>
    <div class=title>
        <h1> title </h1>
    </div>
    <div class=body>
        <h1> stuff here </h1>    
    </div>
</div>​

CSS：

.container {
    border: 1px red solid;
    height: 300px;
}
.title {
    background: blue;    
}
.body {
    background: green;
}

我希望绿色 div 填充红色边框内的空白区域，使其看起来像这样，但没有明确设置高度，因为标题和包含 div 的大小是动态的。

Answer 1

我会这样做的方式是将标题放在正文中。然后你可以将 body 高度设置为 100%（因为它的容器有一个固定的高度）并且标题只会填充它需要的内容，并有自己的背景。通过将相关元素组合到一个容器中，在布局中移动内容也会变得更加简单。

html:

<div class=container>
    <div class=body>
        <div class=title>
            <h1> title </h1>
        </div>
    <h1> stuff here </h1>    
    </div>
</div>​

CSS：

.container {
    border: 1px red solid;
    height: 300px;
}
.title {
    background: blue;

}
.body {
    height:100%;
    background: green;
}

您始终可以在容器内添加另一个元素来包含您的多选，并让它继承父容器的属性。