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 填充红色边框内的空白区域，使其看起来像 this但没有明确设置高度，因为标题和包含的 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;
}

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