赤と緑のdivは隣り合っています。赤いdivを緑のdivと同じ高さにするにはどうすればいいですか?divを縦にすべて使用可能な高さにします
7
A
答えて
5
を持っているので、あなたは両方の要素が含まれており、あなたはその後、ラッパーに位置を追加し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;
}
は注意してください。
0
高さを同じにするには、ドキュメントと赤と緑の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を使用することによってそれを修正。いくつかのケースでは、テーブルのセルが常に同じ高さ
0
テーブルをラッパーとして使用できます。最初と最後の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>
関連する問題
- 1. 垂直スタックされたdivのCSSレイアウトは、使用可能な高さの100%を使用します
- 2. divを縦に並べる
- 3. divの高さを100%に設定するにはdivを使用し、divはCSSを使用しますか?
- 4. 子divがサイズ変更可能な場合、高さのみが親divのサイズに調整可能ですか?
- 5. Divウィンドウの下部と適応可能な高さdiv
- 6. スクロール可能なdivを作成する親コンテナの高さを100%にする
- 7. div子を100%の高さの中でスクロール可能にする親div
- 8. すべてのdivに最も大きいdivの高さ
- 9. divの高さを別のdivの高さに応じて設定します
- 10. divに100%の高さを使用していますが、divの内容を尊重しています
- 11. 画像カルーセル用に高度にカスタマイズ可能なライブラリを探しています
- 12. jQueryのconnectWithを使用してソート可能なdivに結合する
- 13. floatプロパティを使用せずに応答可能なdivを並べる方法
- 14. 使用可能なすべてのスペースを使用しているネイティブフレックスボックスに反応します
- 15. 利用可能なすべてのインターフェイスを同時に使用するには?
- 16. divを縦に伸ばして親の高さにするにはどうすればいいですか?
- 17. ブートストラップをボディ高にスクロール可能なdiv 100%
- 18. Divがすべての利用可能な垂直スペースを占めるようにしますか?
- 19. linqを使用してC#のすべての列をアルファベット順に並べ替えます(可能な場合)
- 20. ブートストラップ3カラム内に固定された高さスクロール可能なdiv
- 21. divを展開して可能なすべての領域を使用する方法
- 22. すべてのdivの高さを一様に設定
- 23. 編集可能なdivの高さの変更を使用して、他のDOM要素にクラスを追加したり削除したりできます。
- 24. divの高さをwindow2の高さに設定します。
- 25. ヘッダーに使用可能なビューポートの高さをどのように取るか?
- 26. jQueryのサイズ変更可能なクッキーにdivの高さを保存
- 27. 他のDIV内にdivを100%高さにします
- 28. さまざまな引数セットを使用可能にする
- 29. JQueryを使用してDIVの高さを取得する
- 30. 子divを自動高さの親divの高さにします
現在のHTML/CSSを追加できますか? [jsFiddle demo](http://jsfiddle.net/)も役立ちます。 – thirtydot
IE7をサポートする必要がありますか? – thirtydot