html, body, div#wrapperの高さをウィンドウサイズに合わせる

html, body {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
}
htmlとbody要素にはheight: 100%;を指定しておくことと、min-heightのIE6用ハックで#wrapperに100%を指定することがポイント。bodyの背景画像をセンタリングするとIEやなんか(SafariとかChromeとかバージョンによって)で1pxずれるんである。なのでdiv#wrapperの方に背景画像を指定したいんだけど、高さがウィンドウサイズより小さくてぶっつり切れてしまうときとかに使える。フッタ固定にも。

参考:フッタ固定

カテゴリ: XHTML+CSS

コメント/トラックバック

トラックバック用URL:

この投稿のコメント/トラックバックフィード:

http://mintlog.com/xhtml-css/html-body-wrapper/346/feed/