html - div を 2 つに分割して、利用可能な垂直方向のスペースをすべて取ります

Question

div を 2 つの横並びの div に分割しようとしています。ここにいくつかの例があることは知っていますが、すでに検索したところ、コンテンツなしで div が垂直方向に利用可能なすべてのスペースを取ることを許可するものは見つかりませんでした。

http://jsfiddle.net/kpDDM/3/をご覧ください

Answer 1

div にパーセンテージの高さを設定するには、その親要素に特定の高さが必要です。この場合、ビューポートの高さに基づいてそれが必要なようです。これを実現するには、すべての祖先 div の高さが 100% である必要があります。

*, html, body, .parent {
    height: 100%;
}

JS フィドル: http://jsfiddle.net/kpDDM/6/

Answer 2

 div タグ内に追加します。固定ピクセルではなく 100% であるため、表示するには内部に何かが必要です。

div タグをページの 100% にしたい場合は、ページが 100% であることを示す必要があります (これにより、div タグは 100% とは何かを理解します)。

* { height:100%; }

body タグと html タグを 100% に変更する必要はありません。

Answer 3

ディバイダーparentは、親コンテナーであるにもかかわらず、body高さの量が明示的に指定されていなくても、%height を取ります。これは、あなたのparent仕切りがheight:auto代わりに上書きされ、希望する高さがないことを示唆しています。

parentこれを機能させたい場合は、固定の高さを宣言する必要があります。現在の最新のブラウザは、親のデフォルトの明示的な高さをサポートしていませんbody。

htmlしたがって、次のように、およびbody仕切りの高さを明示的に定義する必要があります。

html, body {
    height:100%;
}

楽しんで頑張ってください！