コーディングしてるとページの原稿によっては高さが全然足りずに
フッターがエーライ上の方に来てしまう時があります。
そんな時に、フッターを常にブラウザ下部に固定しておく方法。
ウィンドウサイズ可変させても、下にペッタリと固定してくれるので便利といえば便利。
（空のタグ一つ入ってまうけど・・）
ソースはこんな感じ。
<div id="Wrapper"> *********************** <ul id="Navi"> <li id="Navi01"><a href="#" title="*******">Page1</a></li> <li id="Navi01"><a href="#" title="*******">Page1</a></li> <li id="Navi01"><a href="#" title="*******">Page1</a></li> <li id="Navi01"><a href="#" title="*******">Page1</a></li> </ul> コンテンツ～～～～～～～～～ <div class="push"></div> </div> <div id="Footer">Copyrights</div>
固定させるフッターのすぐ上のボックスに空Divを入れてしまいます。
CSSは
body {
height: 100%;
line-height: 150%;
}
body > #Wrapper {
height: auto;
}
#Wrapper {
width: 800px;
margin: 0 auto -70px;
text-align: left;
min-height: 100%;
height: auto !important;
｝
#Footer {
width: 100%;
height:70px;
text-align: left;
background-image: url(../../img/loop/footer.png);
background-repeat: no-repeat;
}
.push {
height:70px;
}
と、コンテンツ部分にマイナスのマージンを置くことがミソ。
もちろんpushの中身になにかいれてもよいです。
