CSSだけで画面を縦に分割する方法
画面内目一杯に広がった要素を縦に分割したい時、CSSだけでやるにはどうすればよいでしょうか。
例えばヘッダーを画面上部、フッターを画面下部に常に固定し、コンテンツが多すぎる場合はコンテンツ部分のみにスクロールバーを出すようなことをやりたい場合です。
こんなことをやりたい。。。
2つほど発見したので、記録しときたいと思います。
オーソドックスな方法
OKWave|スタイルシートで画面を上下に分割,高さを上部はpxで指定,下部は残り全部にする方法
使い古されたCSSの記述だけでできる方法です。
top・bottom を使ってコンテンツの高さ調整をし、absolute でヘッダー・フッターに重ならないよう配置します。
IE6への対応方法もあるようです。
display box を使う方法
box-orientation: vertical で垂直に配置し、コンテンツに box-flex: 1 を指定して、高さを可変にします。 FireFox では overflow: auto を指定しても高さが固定されないので、内部に absolute の要素を配置します。
何か間違いとかがあればコメントお願いします。