html - 如何获得 height: 100% 以说明同一 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%;
}

编辑

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

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

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

Answer 1

怎么用overflow:hidden;？

#container {
    width: 400px;
    height: 400px;
    border: 5px solid black;
    overflow:hidden;
}

JSF中。

Answer 2

#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/

Answer 3

为什么不直接使用汽车？

http://jsfiddle.net/h3gsz/3/

CSS：

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

Answer 4

更有经验的人可能有更好的选择，但你可以试试这个：

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

根据您要使用它的目的，您可以删除#remaining_content <div>

HTML：

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

CSS：

#container {
  background-color: green;
  width: 400px;
  height: relative;
  min-height:400px;
  border: 5px solid black;
  overflow:none;
  word-wrap:break-word;
}
#top_content {
  background-color: blue;
  width: 100%;
  height: 50px;
}

Answer 5

你也可以使用 display:table; 在这里摆弄

.main, .sidebar {
float: none;
padding: 20px;
vertical-align: top;
}

.container {
display: table;
}

.main {
width: 400px;
background-color: LightSlateGrey;
display: table-cell;
}

.sidebar {
width: 200px;
display: table-cell;
background-color: Tomato;
}