html - 高さ 100% が機能しない、div 内の 2 つの div

Question

css を参照してください: http://jsfiddle.net/4JgA4/114/

ここもまた：

<div style="min-height:40px; border:solid 1px black; float:left;">
      <div style="border:solid 1px black; height:150px; float:left;">
       First to set height
      </div>

       <div style="border:solid 1px red; height:100%; float:left;">
      Why don't get the 100%
    </div>
</div>

2 番目の div が 100% にならないのはなぜですか?

Answer 1

<div style="min-height:40px; height:150px; border:solid 1px black; float:left;">
    <div style="border:solid 1px black; height:100%; float:left;">
    Your text 1
    </div>

    <div style="border:solid 1px red; height:100%; float:left;">
    Your text 2
    </div>
</div>

• その理由は、最初の .
• もう1つ、最初の高さの正確な高さをすでに入力しています.height = 100％の内部タグのみが必要です。

結果は次のとおりです。http://jsfiddle.net/4JgA4/117/

Answer 2

親divには親要素にある必要があるプロパティがheightありませんが、高さが動的な場合はjQueryを使用してこれを行う必要がありますheight :100%height:specific heightmin-height

Answer 3

親 div には高さがないため、高さは取得されません。以下のコードを使用

<div style="height:150px; border:solid 1px black; float:left;">
    <div style="border:solid 1px black;height:100%;  float:left;">
    First to set height
    </div>

    <div style="border:solid 1px red; height:100%; float:left;">
    Why don't get the 100%
    </div>
</div>

Answer 4

親divに高さ300pxを与えて、期待どおりの結果を確認してください

<div style="min-height:40px; height:300px; border:solid 1px black; float:left;">
        <div style="border:solid 1px black; height:150px; float:left;">
        First to set height
        </div>

        <div style="border:solid 1px red; height:100%; float:left;">
        Why don't get the 100%
        </div>
    </div>

こちらをご覧ください

Answer 5

以下の例は、他の div 内に含まれる div に 100% の高さまたは幅を割り当てる方法を示しています。

HTML コード:

<div class="container">
<div class="span5 fill">
Hello World
</div>
</div>

CSS コード:

html,body{height:100%;}

.container {
     height:100%;
}

.fill{
   width:100%;
   height:100%;
   min-height:100%;
   background-color:#990000;
   padding:10px;
   color:#efefef;
}