制作ブログ Web制作マークアップCSS高さをコントロールする

高さをコントロールする

とはいえ、正確にコントロールできるわけではないが、縦幅を認識させたいときに有効。

html,body{
height:100%;
}

高さの%指定は親要素に依存することを利用するため、ルートであるhtml続いてbodyに高さ100%指定するのがポイント。ちなみにデフォルトはautoで何の記述もない場合は高さは0と認識する。

標準モードや互換モード、ブラウザで若干解釈が違うので万能とは言いがたいが知っていて損はないと思う。

#page{
min-height:100%;
}

ちなみに上記の指定を追記することでdiv#page内に書かれるコンテンツが短くてもブラウザに全体表示が可能。