Css 使div高度100%，内部拉伸一个'；行不通

我有3个盒子（div-s）

主盒子里面有两个盒子。第一个（框1）向右浮动，另一个（框2）向左浮动

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

我所做的： 我让方框2将主方框拉伸4行但框2的高度仍然相同，即使是100%

代码

方框1第1行
方框2第1行
方框2第2行
方框2第3行
方框2第4行

简单的照片包括在内。

---

我仍在学习，这让我感到困惑，我不知道为什么当我将框1设置为100%高度时，框2不会拉伸框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>

方框1第1行
方框2第1行
方框2第2行
方框2第3行
方框2第4行

发件人：

该百分比是根据建筑物的高度计算的 生成的框的包含块。如果容器的高度 块未明确指定（即，它取决于内容 高度），并且该元素不是绝对定位的，该值 自动计算。根元素上的百分比高度是相对的 到初始包含块

---

工作示例：

您已将“仅添加文本”设置为框2，并将高度设置为100%，等于高度：自动；它将采取100%的内容大小，所以它不会拉伸。最好的解决方案是将高度设置为固定ex:height:200px；或者您可以添加内容并保持高度：100%

换句话说，100%什么？设置父项的高度将提供一个100%可使用的值。@Matt couglin 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>