CSSで、画面いっぱいの高さでフッターを下付き表示にする

画面いっぱいの高さでフッターを下付き表示にしたいときは多い。

このサイトで詳しく紹介されていたのでメモ。
http://webmitikusa.blog47.fc2.com/blog-entry-3.html
すばらしい!!!

以下はCSSの骨

html,body {
height:100%;
margin:0;
}
.#container {
width:800px;
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto;
position:relative;
}
#header {
width:800px;
height:80px;
}
#content {
width: 800px;
}
#footer {
width: 800px;
height: 80px;
position: absolute;
bottom: 0;
}
* html #footer {
bottom:expression(document.getElementById("container").offsetHeight % 2 == 0 ? 0 : -1);
}

JAVASCRIPTも使ってIE6対策を行ってくれている。すばらしいの一言だ。

コメントを残す

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

CAPTCHA