如何在没有 JS 的纯 HTML/CSS 中创建动态水平布局？

Question

看看这个例子： http://jsbin.com/ixiju4/2/edit

我有一个 wrapper，它定义了高度，里面有两个容器：top 和 bottom。 顶部容器的高度没有固定（在示例中它设置为 100 像素，但这只是为了演示）。我想要的是动态设置底部容器以填充包装器的其余部分。

在这个演示中，我使用了 JS：

$(function() {
  var top = $('#top');
  var bottom = $('#bottom');
  bottom.height(bottom.parent().height()-top.outerHeight());
});

你认为有一种方法可以在纯 HTML/CSS 中实现吗？无论如何，我什至可以使用表格。我一直在考虑解决方案一段时间，但没有找到任何跨浏览器兼容的解决方案。 感谢您的帮助。

更新 1： 我在定义这个问题时犯了一个错误 top 没有固定的高度 - 它是由它的内容定义的。 http://jsbin.com/ixiju4/6

更新 2： 好的。这是我真正想要的： http://jsbin.com/ixiju4/8

Answer 1

有一个非常简单的纯 CSS 解决方案：

#wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  #top {
    height: 100px;
    width: 100%;
    background-color: #00f4f7;

  }
   #bottom {
    background-color: #00f400;
    width: 100%;
    height: 100%
  }

更新 2 继您对问题的上一轮编辑之后，我相应地更新了 CSS，即：

#wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  #top {
    background-color: #00f4f7;   
  }

  #bottom {
    background-color: #00f400;
    height: 100%;
    padding: 10px;
  }

  #inner {
    height: 100%;
    background-color: #f0f400;
    margin-bottom: 10px;
  }

Answer 2

好吧，如果你可以使用表格：

<table style="height:400px">
  <tr>
    <td style="height:100px">Fixed to arbitrary value</td>
  </tr>
  <tr>
    <td style="height:auto">Dynamically filling</td>
  </tr>
</table>

http://jsbin.com/ixiju4/3

免责声明：尊敬的 Google 员工，如果您找到了这个答案：不要在家里这样做！样式表是邪恶的。使用display: table 和display: table-row 在除IE 之外的所有内容中都可以达到相同的效果

编辑 2： 好的，为了完整性：

#wrapper { display: table; }

#top, #bottom { display: table-row; }

如前所述，在 IE http://jsbin.com/ixiju4/5

编辑 3：我真的是瞎了。是的，Tiny Giant Studios 以显而易见的方式回答了这个问题。你应该接受他的回答。 （为了完整起见，我离开了。）