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

我这样做的方法是将标题放在中。然后你可以将身高设置为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;
}

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

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

1 个答案: