我做了什么：

Question

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

主箱里面有两个箱子。第一个（Box1）浮动到右边，另一个（Box2）浮动到左边。

两个方框都设置为100％的高度，所以当其中一个拉伸主要时另一个按照相同的高度

我做了什么：

我让Box 2拉伸主框4行。但方框2的高度仍然相同，即使是100％。

CODE

<!-- 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拉伸。

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：

百分比是根据高度来计算的生成的框包含块。如果含有的高度未明确指定块（即，它取决于内容高度），这个元素并不是绝对定位的值计算自动。根元素的百分比高度是相对的到最初的包含块。

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

Answer 2

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

使div高度100％，在拉伸内部不起作用

我做了什么：

CODE

包含简单照片。

2 个答案: