divを縦にすべて使用可能な高さにします

enter image description here 赤と緑のdivは隣り合っています。赤いdivを緑のdivと同じ高さにするにはどうすればいいですか？divを縦にすべて使用可能な高さにします

2012-01-05 Ryan

現在のHTML/CSSを追加できますか？ [jsFiddle demo]（http://jsfiddle.net/）も役立ちます。 – thirtydot

IE7をサポートする必要がありますか？ – thirtydot

を持っているので、あなたは両方の要素が含まれており、あなたはその後、ラッパーに位置を追加しclearfixed

<div class="wrapper clearfix"> 
    <div class="red"></div> 
    <div class="green"></div> 
</div>

であるdiv要素を持っている必要があり、ここではテーブルを使用することが良いです。

.wrapper { 
    /* remember this is clearfixed */ 
    position: relative; 
}

あなたは右に緑色のコンテナフロートを聞かせて：

.green { 
    float: right; 
    width: 50%; 
}

その後、赤の絶対位置と、それはそれはラッパーのすべてのスペースを使用する必要があることを知っている：緑のコンテナは、左1よりも大きい場合、この場合にのみ動作することを

.red { 
    position: absolute; 
    left: 0; 
    width: 50%; 
    top: 0; 
    bottom: 0; 
}

は注意してください。

出典

2012-01-05 09:35:20 Duopixel

高さを同じにするには、ドキュメントと赤と緑のdivの間にdivを追加する必要があるため、このdivには高さが定義されている必要があるため、divの両方の内部の高さを100％

<div style="height: [must be defined]"> 
    <div id="red" style="height: 100%; ..."> ... </div> 
    <div id="green" style="height: 100%; ..."> ... </div> 
</div> 
<div id="black" style="height: 100%; ..."> ... </div>

BUT - div要素の一方が他方よりも高くなるとき、これは、破損します - オーバーフロー

PSを使用することによってそれを修正。いくつかのケースでは、テーブルのセルが常に同じ高さ

出典

2012-01-05 09:33:37 SergeS

テーブルをラッパーとして使用できます。最初と最後のtrはオプションです。しかし、最初または最後のtrが必要な場合は、高さを設定します。ブラウザは、中間trの正しい高さを計算するためにこれを必要とします。

<!DOCTYPE HTML> 
<html> 
<head> 
    <title></title> 
</head> 
<style type="text/css"> 
    html, body {height:100%; padding:0; margin:0;} 
    #wrapper {height:100%;width:100%;border-collapse:collapse;} 
    #wrapper td {vertical-align:top;} 
    #wrapperFirst, #wrapperLast {height:1px;} 
</style> 
<body> 
    <table id="wrapper"> 
     <tr><td id="wrapperFirst" style="background-color: #ff44ff;">foo top</td></tr> 
     <tr><td style="background-color: #ffff44;">text</td></tr> 
     <tr><td id="wrapperLast" style="background-color: #44ffff;">foo bottom</td></tr> 
    </table> 

</body> 
</html>

出典

2013-06-12 08:41:55 Uwe

divを縦にすべて使用可能な高さにします

答えて

関連する問題