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

Question

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

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

在这个演示中，我使用 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;
  }