font

6月 05, 2014

怎麼固定HTML頁腳?


最近因為需要,所以研究了固定頁腳的語法,順便記錄一下。
首先,你的網頁一定要是包在這個架構:

<div id="wrap">
     <div id="main">
     </div>
</div>
<div id="footer">
</div>

再來是上面那段如果看不懂,請看下列重點提要:

1.wrap的div,包的是整個body的html,而裡面的main的div,包的是你的header。
2.footer的div包的是你的頁腳的html.

接著在你的css.style(或你設定css的地方)加入下列語法:
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {
overflow:auto;
padding-bottom: 150px;/* 高度要和你的頁腳一樣 */
} 
#footer {
position: relative;
margin-top: -150px; /* 負值高度也要和你的頁腳一樣 */
height: 150px;
clear:both;} 

/*Opera Fix*/
body:before {
     content:"";
     height:100%;
     float:left;
     width:0;
     margin-top:-32767px;/
}

<!--[if !IE 7]>
     <style type="text/css">
          #wrap {display:table;height:100%}
     </style>
<![endif]-->



p.s.
如果你的網頁header是寫在php裡的,
那麼 <div id="main"></div> 這行就不用加了,
直接包這個:
<div id="wrap">
</div>

<div id="footer">
</div>
----------------------------  
7/7補充: 

此用法是網路上參閱了幾篇文章整理出來的,
後來發現這樣的設定方式有時候對應到不同電腦螢幕高度,頁腳會產生吃掉頁面的問題
主要是#wrap和#footer中的兩項css在作祟:
#wrap {
min-height: 100%;
}
#footer {
margin-top: -150px; /* 負值高度也要和你的頁腳一樣 */
}


後來我調整了這兩項,改成
#wrap {
min-height:
 79.1%;
}

(請自行調整數質,用755px之類的也行,但使用%數更能準確適應各種螢幕高度)

#footer {margin-top: -150px; /* 負值高度也要和你的頁腳一樣 */
margin-top: 50px;
}

(沒錯,margin-top:-150px這項設定完全刪掉,
後面的
margin-top:50px是我自己多加的,不一定要,如果頁面跟頁腳黏太緊可以加一下)


以上,就完全克服了全部頁腳亂吃頁面或有些出現疊來疊去的困擾~~~(歡樂)


Related Posts Plugin for WordPress, Blogger...

ShareThis