標準モードのCSSで高さ100%のボックスを可能にする方法。

サイト制作の際、ボックスを高さを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を設定するれば、意図するボックスの高さにすることが出来る。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です