流され日記

好奇心の赴くまま、日々起こした行動の記録

CSSだけで画面を縦に分割する方法

画面内目一杯に広がった要素を縦に分割したい時、CSSだけでやるにはどうすればよいでしょうか。
例えばヘッダーを画面上部、フッターを画面下部に常に固定し、コンテンツが多すぎる場合はコンテンツ部分のみにスクロールバーを出すようなことをやりたい場合です。

f:id:kakusuke07:20121115233724p:plain

こんなことをやりたい。。。

2つほど発見したので、記録しときたいと思います。

オーソドックスな方法

OKWave|スタイルシートで画面を上下に分割,高さを上部はpxで指定,下部は残り全部にする方法
使い古されたCSSの記述だけでできる方法です。 top・bottom を使ってコンテンツの高さ調整をし、absolute でヘッダー・フッターに重ならないよう配置します。 IE6への対応方法もあるようです。

display box を使う方法

box-orientation: vertical で垂直に配置し、コンテンツに box-flex: 1 を指定して、高さを可変にします。 FireFox では overflow: auto を指定しても高さが固定されないので、内部に absolute の要素を配置します。

サンプルコード

何か間違いとかがあればコメントお願いします。