css - 使 div 高度为 100%，内部拉伸(stretch)行不通

Question

我有 3 个框 (div-s)。

main-box里面有两个盒子。第一个 (Box1) 向右浮动，另一个 (Box2) 向左浮动。

两个框的高度都设置为 100%，所以当其中一个拉伸(stretch)主框时，另一个框的高度相同

我做了什么:

我让 Box 2 拉伸(stretch)主框 4 行。 但是盒子2还是一样的高度，甚至是100%。

代码

<!-- main box -->
<div style='border: 1px solid; padding: 5px;'>

    <!-- box 1 -->
    <div style='border: 1px solid; height: 100%; float: right;'>Box 1 Line 1</div>
    <!-- box 2 -->
    <div style='border: 1px solid; height: 100%; float: left;'>Box 2 Line1<br /> Box 2 Line2<br />Box 2 Line3<br />Box 2 Line4</div>

<!-- clear -->
<div style='clear: both;'></div>
</div>

包括简单的照片。

http://im31.gulfup.com/Rn6H3.png

我还在学习，这让我很烦恼我不知道为什么当我将它设置为 100% 高度时，框 1 不会随框 2 一起拉伸(stretch)。

Answer 1

为容器添加高度。除非在包含元素上指定高度，否则浏览器无法使用百分比计算高度。当浏览器试图将 box2 设置为 100% 时，它无法确定 div 应该是 100% 的高度(父元素高度)。

<div style="border: 1px solid; padding: 5px; height: 77px;">

    <!-- box 1 -->
    <div style="border: 1px solid; height: 100%; float: right;">Box 1 Line 1</div>
    <!-- box 2 -->
    <div style="border: 1px solid; height: 100%; float: left;">Box 2 Line1<br> Box 2 Line2<br>Box 2 Line3<br>Box 2 Line4</div>

<!-- clear -->
<div style="clear: both;"></div>
</div>

来自 MDN :

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.

工作示例: http://jsfiddle.net/pZHaY/