0

我有 3 个盒子（div-s）。

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

两个框的高度都设置为 100%，因此当其中一个拉伸主框时，另一个框的高度相同

我做了什么：

我让 Box 2 拉伸了 main-box 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

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

4

2 回答 2

2

为容器添加高度。除非在包含元素上指定了高度，否则浏览器无法使用百分比计算高度。当浏览器尝试将 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：

该百分比是相对于生成框的包含块的高度计算的。如果包含块的高度没有明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为 auto。根元素上的百分比高度是相对于初始包含块的。

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

于 2013-03-10T18:20:53.730 回答
0

您已将添加的文本设置为仅框 2，并且您已将高度设置为 100%，这等于 height:auto; 它将内容的大小设为 100%，因此不会拉伸。最好的解决方案是将高度设置为固定 ex: height: 200px; 或者您可以添加内容并保持高度：100%。

于 2013-03-10T18:46:27.253 回答