html - float div 和旁边的非 float div 的高度均为 100%

Question

我想创建 3 个彩色 div。

左:固定宽度和 100% 高度

右边:填充剩余空间(100% 高度和宽度(减去左边的 div))

最后一个div:在右边的div里面

这是我目前所拥有的:

这是CSS:

.left {
width:200px;
height:100%;
top:0;
position: absolute;
background: black;
float:left;
}

.right{
margin-left:210px;
background: green;
position: relative;
height: 100%;
}

.box {
width: 50%;
height: 200px;
position: relative;
margin-right: auto;
margin-left: auto;
background: black;
}

这是 HTML:

<div class="left"></div>
<div class="right">
  <div class="box"></div>
</div>

http://jsfiddle.net/fxWg7/1632/

这使得 div.right 成为其中框的大小，即使我试图使它成为窗口的 100%。我该如何解决这个问题？

我的另一个问题是:为什么我不能让 div.box 有 100% 的高度？如果我尝试这样做，div.right 和 div.box 都会消失。

Answer 1

如果你想要100%的窗口高度，添加:

html, body
{
    height:100%
}

给你 CSS。但如果有任何东西超出了窗口的高度，那就是完全不同的问题了。