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。但如果有什么东西超出了窗户的高度，那就完全不同了。

Answer 2

您正在将窗口的概念与页面概念混合在一起。

height: 100%;
width: 100%;

指定所有受影响元素的height和width应填充其父级，而不是整个窗口。您的页面中没有需要大小的内容，因此页面的大小非常小。这就是你的div消失的原因。

您需要使用javascript设置正文的大小。

浮动div和旁边非浮动div的100％高度

2 个答案: