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

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

html:

---

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

我将这样做的方式是将标题放在正文中。然后，您可以将主体高度设置为100%（因为其容器具有固定高度），标题将仅使用其自身背景填充所需内容。通过将相关元素组合到一个容器中，也可以更简单地在布局中移动内容

html:

---

您始终可以在容器中添加另一个元素以包含multi-select，并使其继承父容器的属性。

Easy？这些背景只是一个例子。body元素实际上包含一个多重选择，我想填充height.riiLight。我不知道如何不修改标记的布局，因为您希望保留流。纯CSS没有一种方式可以说“让x拥有这么多，让y拥有剩下的”。我还没见过。@Jared Farrish好的，谢谢，javascript可以获取并设置元素的角或边的位置吗？我不知道角或边是什么意思，但是如果你的意思是基于从公共父元素减去另一个元素的高度来回填高度，是的，javascript可以这样做。请注意，jQuery让它变得容易多了，但有一点，它可能有点过头了。不过，获取跨浏览器的实际元素高度可能很有挑战性。在我的示例中，最终我希望填充所有绿色区域的是多选，应该继承哪些属性才能使其工作？您应该继承颜色或任何其他要继承的内容。不过，我建议对容器使用灵活的高度，因为某些浏览器（特别是使用可变字体大小的移动浏览器）会显示比其他浏览器大的文本，并且您不希望出现令人尴尬的溢出，使页面看起来凌乱。

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

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

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

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

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