0

私は3つのボックス（div-s）を持っています。

その中のメインボックス2つのボックス。最初の（Box1）は右に浮き、もう一方（Box2）は左に浮きました。

両方のボックスの高さは100％に設定されているため、一方をメインに伸ばすと、もう一方は同じ高さになります。

私がしたこと：

ボックス2にメインボックスの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で引き伸ばされない理由がわかりません。

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％になるため、伸びません。最善の解決策は、高さを固定として設定することです。例：height：200px; または、コンテンツを追加して高さを100％に保つことができます。

于 2013-03-10T18:46:27.253 に答える