html - 我怎样才能得到高度 : 100% to account for existing pixel-heighted elements within the same div?

Question

我有一个包含两个 div 的定义高度的容器，第一个具有像素定义的高度，第二个我想填充其容器的剩余空间，即 100% 减去第一个 div 的像素定义高度.

有没有不涉及 JavaScript 的解决方案？我可以使用 JavaScript 解决方案(事实上，JavaScript 改变容器的高度是我来到这里的原因)，但这似乎应该有较低级别的支持，而且这看起来可能会成为一个级联问题。

例子

http://jsfiddle.net/h3gsz/1/

HTML

<div id="container">
    <div id="top_content"></div>
    <div id="remaining_content"></div>
</div>

CSS

#container {
    width: 400px;
    height: 400px;
    border: 5px solid black;
}
#top_content {
    background-color: blue;
    width: 100%;
    height: 50px;
}
#remaining_content {
    background-color: red;
    width: 100%;
    height: 100%;
}

编辑

已经为原始 fiddle 提供了答案，但在简化问题时我允许答案引入新问题:http://jsfiddle.net/h3gsz/6/

我删除了行内 block 样式和最大宽度值。鉴于剩余内容的绝对定位，容器的宽度不再由所述内容(来自内联 block )定义，因此在不应该有水平滚动条的地方引入了水平滚动条。

我不确定我是否应该简单地提出一个新问题。

Answer 1

#container {
    width: 400px;
    height: 400px;
    border: 5px solid black;
    position: relative;
}
#top_content {
    background-color: blue;
    width: 100%;
    height: 50px;
}
#remaining_content {
    background-color: red;
    width: 100%;
    top: 50px;
    bottom: 0;
    position: absolute;
}

http://jsfiddle.net/h3gsz/4/