Javascript 如何在纯HTML/CSS中创建动态水平布局？

看看这个例子：

我有一个高度确定的包装器和两个容器：顶部和底部。 顶部容器的高度不是固定的（在本例中设置为100px，但这只是为了演示）。我想要的是动态地设置底部容器来填充包装器的其余部分

在本演示中，我使用JS：

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

你认为有没有一种方法可以在纯HTML/CSS中实现这一点？不管怎样，我甚至可以使用表格。我考虑这个解决方案已经有一段时间了，还没有找到任何跨浏览器兼容的解决方案。 谢谢你的帮助

更新1: 我在定义这个问题时犯了一个错误。top没有固定的高度——它是由它的内容定义的。

更新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>

如前所述，在IE<8中不起作用

---

编辑3:我真的是瞎了。是的，小巨人工作室以显而易见的方式回答了这个问题。你应该同意他的回答。（为了完整起见，我将离开我的网站。）

有一个非常简单的纯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;
  }

---

请，请，请：不惜一切代价避免使用表格进行布局——表格是用于表格数据的，仅此而已。另外，使用

style

属性也不行。@jgradim:Cool-down。OP似乎急需，他明确表示，他可以使用表格进行样式化，就我所见，你无法提供更好的解决方案（CSS3网格不算）。我的呼吁不是对答案的批评，而是对作者的呼吁。对不起，如果安装错误：）好的，那么我们有共同点。我能想到的表格设计的唯一借口是电子邮件模板和IE6的内联网应用程序，期限很紧。如果你在包装上加上溢出：隐藏，那就更好了。嘿嘿，谢谢-我希望我一直都有这样清晰的时刻：）我怀疑这个解决方案是否有意义：#底部将是#包装器的100%高度，它必须是#包装器高度-#顶部高度基于你提出的问题，它工作得非常好。但是，您在上面的评论似乎表明标准已更改。也许重新表述一下你想让HTML/CSS做什么——你已经多次编辑了这个问题，只说了“这就是你想要的”。在更新之后，我仍然相信下面的解决方案会奏效。如果需要，可以设置最小高度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;
  }