css - 複数の div の 100% 最小高さ?

Question

たとえば、単一のページレイアウトで次の構造があるとします。

<div id="container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>

CSS のみを使用して、div 1 ～ 4 の最小の高さを 100% に設定し、各 div を上下に配置することは可能ですか? 各 div の高さが 100% のページを作成しましたが、div のコンテンツがブラウザー ウィンドウよりも長い場合に問題が発生し始めます。min-height 100% 関連の記事はたくさんあるようですが、複数の div が関係している記事はまだ見つかりません。

Answer 1

要素に対して、heightまたはmin-height要素に対して正しく機能するには、要素の親が明示的にheight宣言されている必要があります。これは、DOM ツリーのずっと上まで続きます。

私の知る限り、min-height を使用して 1 つまたは複数の div 要素をレンダリングすることに違いはないはずなので、CSS だけで配置を行うことは可能です。

詳細については、高さのパーセンテージ HTML 5/CSSを参照してください。