垂直スタックされたdivのCSSレイアウトは、使用可能な高さの100％を使用します

Question

2つのdivが親divの中に垂直に積み重ねられているレイアウトです（左手のメニューが含まれているため）。私は2つの部門が利用可能なすべての垂直スペースを占めることを願っています。ただし、コンテンツに応じてサイズを変更する必要があります。説明する最も簡単な方法は、図とされている：上から下の図を読み込み

、このシナリオである：

1. 両方のdivこのように利用可能な高さの50％を取りますコンテンツを格納するのに十分です（これがデフォルトです）。

2. トップdivにはコンテンツが多く、ボトムdivにはコンテンツが少なくなります。上のdivはコンテンツに合わせて展開し、下のdivにはsquashesします。

3. 逆状態の（2）。

4. 両方のdivは、コンテンツに合わせて展開する必要があります。 divを含むことは、収容するために拡張する必要があります。

は私が適切に展開しない外側のdivを除いて（とにかくクロムで）ほとんど正しいexample hereを参照して、テーブルでこれを行う方法を見つけ出すことができると思います。

テーブルを使用しないと、これに対してより良いCSSソリューションがありますか？ 。

私はJavaScriptを使用することはできませんし、溶液がすべてのブラウザ... IE6 :( 含むで働かなければならない

Answer 1

あなたはそれが100％の高ラッピングDIVなどのような白のボーダーフェイク使用できます

をあなたはまた、一定の高さを削除することができますし、それはまだ動作しますhttp://jsfiddle.net/cBV88/2/

。

Answer 2

これが機能して、CSSを使用して行うことができ、柔軟なボックスモデルと呼ばれる。これは、Bのボックスモデルを拡張します最初からCSSで使用されており、以前は不可能だった垂直スタッキングなどの作業を行うことができます。

まず、display: flexbox;で始まり、他の関連スタイルを使用して、必要なレイアウトの特性を定義します。それは非常に強力です。 http://www.w3.org/TR/css3-flexbox/

今、悪い知らせとして：これはCSSの最近の追加です。実際にはベンダーの接頭辞ではありますが、ブラウザのサポートはかなり良好ですが、常にヒットする問題は、IE9ではサポートされていないということです（IE10用に計画されていますが）

その他のブラウザーではサポートされているブラウザであっても、スタイルを4つまたは5つのバージョンで記述する必要があります。

さらに、これは本当のキラーです。それをサポートしていないブラウザには良いフォールバックソリューションはありません。 flexboxレイアウトを使用してページをデザインし、それをサポートしていないブラウザにロードすると、災害になります。

このため、現実世界ではあまり使用されていません。 IE9以前のものが使用されている限り、それは主流にはなりません。あなたがここに機能のフルブラウザの互換性チャートを見ることができます

：ところでhttp://caniuse.com/#search=Flexible%20Box%20Layout%20Module

を、あなたはJavascriptのソリューションを使用する必要があるとしています。

私の推奨はJQuery Masonryプラグインです。私はこれが今あなたにとって最高の解決策になると思います。

Answer 3

SuperStretchあなたのところに行くことができます。