高度为 100% 高度的 HTML 布局

Question

我需要帮助解决某个问题。基本上，我需要一个 div，里面有一个表格，单元格中有 div，等等。另外，我需要最外面的 div 具有 100% 的高度和宽度（覆盖整个页面），并且子代要相应地计算它们的高度，除了那些内容高度大于其内容高度的 div（它们应该显示滚动条）

我准备了一个带有测试页面的小提琴：

http://jsfiddle.net/S2YSh/6/

到目前为止，只有 Google Chrome 按我的计划显示，IE 不会计算高度 100% 的内边距和边距，Firefox 会拉伸与内容（无滚动条）

如果有人可以帮助我（最好使用相同的 HTML 结构），我将不胜感激。

Answer 1

你可以这样做：

.right{
    float:right;
    width:200px;
    height:100%;
    background:red;
}
.left{
    overflow:hidden;
    background:green;
    height:100%;
}
.right, .left{
padding:20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

html, body{
    height:100%;
}

检查这个http://jsfiddle.net/S2YSh/9/

Answer 2

试试这个：

<div style="height:100%;width:100%;position:absolute;top:0;left:0;">
  <table>...</table>
</div>