サイト制作の際、ボックスを高さを100%にしてブラウザの下端へ合わせたい事がある。
Copyright表記なんかは特にそうしたいが、標準モードでCSS制御をする場合、ボックスの高さを100%に指定してもうまくいかない。
標準モードの場合、ボックスの高さは中に入る文章量などに依存する。
そのため、手っ取り早く高さを100%にしたい場合は、互換モードを使用すればいい。
しかし、だ。
仕事でサイト制作を行うと、きっちりレギュレーションが決まっている場合がある。
そしてその場合「標準モードにせよ」と言う規約があることが多い。
互換モード自体はあまり推奨されるものではないので、できれば標準モードでサイトを制作したいところ。
でも、ボックスの高さは100%にしたい。
そんなジレンマを抱えた場合は、CSSの記述を下記のようにすればいい。
＜style type = "text/css"＞
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
｜
（以下その他設定）
｜
}
＜/style＞
IE6ならbodyの指定だけで済むが、Firefoxにも適用させたいので、htmlにもheight: 100%を指定する。
あとは、高さ100%にしたいボックスのIDを設定するれば、意図するボックスの高さにすることが出来る。