コーディングしてるとページの原稿によっては高さが全然足りずに
フッターがエーライ上の方に来てしまう時があります。
そんな時に、フッターを常にブラウザ下部に固定しておく方法。
ウィンドウサイズ可変させても、下にペッタリと固定してくれるので便利といえば便利。
(空のタグ一つ入ってまうけど・・)
ソースはこんな感じ。
< 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の中身になにかいれてもよいです。