html - div の高さと背景色

Question

私は試してみoverflowましclear: both;たが、子divの高さを等しくすることができません。高さを静的にしたくありません。誰かがこれを達成するのを手伝ってくれますか?

ここに問題を示すフィドルがあります。

Answer 1

静的な幅を持っているように見えますが、静的な高さは必要ないため、コンテナdivを に設定し、 position: relative;1 つのdivフロートを残して、もう 1 つのフロートをdiv絶対に配置することで修正できます。このようなものjsFiddle。

フローティングは高さdivを確保しcontainer div、絶対位置divの はフローティングと同じ高さに自動的にサイズ変更されdivます。次に、スクロール バーの高さがフローティングの高さを超える場合にスクロール バーがそれらの内部に表示されるようoverflow-y: autoに、絶対配置の 's を設定する必要があります。これはすべてのブラウザで機能するはずです。divdiv

div.container {
  position: relative;
  width: 800px; // height will be determined by the content of div.left
}
div.left {
  float: left;
  width: 400px; // height will be determined by its content
}
div.middle, div.right {
  position: absolute;  
  overflow-y: auto;
  width: 200px;
  bottom: 0px;  // These two lines will ensure that this div's height
  top: 0px;     // is equal to the height of div.left and div.container
  left: 400px;  // Value should be equal to the width of div.left  
}
div.right {
  left: 600px;  // Value is the sum of the width of div.left and div.middle.
}

PSbackground-colorがコンテナ全体を埋めることだけが必要な場合(投稿のタイトルが示すように)、コンテナに をdiv設定するだけです。background-colordiv

Answer 2

JavaScript を使用せずにこれを実現する最善の方法は、css3 フレキシブル レイアウトを使用することです。

#newTask .body {
  display: -webkit-flex;
  -webkit-flex-direction: row;
}

このようなものですが、使用しているブラウザのプレフィックスです。

Answer 3

そのすべての子 div (左、中央、右) でdisplay: table;on #newtask .bodyand thenを使用できます。display: table-cell;

これにより、テーブルのように動作し、すべての div が同じサイズになります。

#newtask .body {
 display: table;
}

#newtask .body > div {
 display: table-cell;
 height:100%;
}

フィドル: http://jsfiddle.net/mv46q/1/