[公告] 痞客邦新服務上線 每日星座運勢測算[公告] 痞客邦應用市集全新改版![公告] 痞客邦「應用市集」新 App 上架-iFontCloud Professional[公告] 痞客邦後台發表文章提供插入多張圖片新功能[公告]痞客邦新服務上線 部落客商店聚集就在《痞市集》
spotlight_title
所謂 footer 置底指的是:
當內容高度尚未填滿瀏覽器視窗高度時,footer 依然會顯示在視窗的最下方;而當內容超過瀏覽器視窗高度時,會延伸內容區塊且緊接著 footer 區塊。

實際範例:New CSS Sticky Footer (可縮放視窗高度以預覽置底效果)

html 語法編輯如下:
<div class="wrap"> <header>Your Header</header> <div class="main">Your Main Content</div> </div> <footer></footer>


css 語法編輯如下:
html, body { height: 100%; } .wrap { min-height: 100%; *display: table; /* For IE7 Hack */ *height: 100%; /* For IE7 Hack */ } .main { overflow:auto; padding-bottom: 180px; } /* must be same height as the footer */ footer { position: relative; margin-top: -180px; /* negative value of footer height */ height: 180px; clear:both; }


這樣的技巧運用的其實就是 min-height 的特性,在主要區塊設定 min-height 為 100% 後再加上 padding-bottom 的空白,然後將 footer 往上位移相等高度而達成。

缺點:
footer 必須固定高度而無法製作成依照內容多寡而增減之彈性高度
不過基於大部分 footer 的內容都很固定,所以其實這樣的問題也就相對可以無視 (?)

由於此設定並未實際測試各瀏覽器,大膽判斷不支援 IE6 以下。
其餘瀏覽器大致上應該 OK,有待各位勇者測試。

以上
, , ,

Posted by Leah at 痞客邦 PIXNET 留言(1) 引用(0) 人氣()

open trackbacks list Trackbacks (0)

留言列表 (1)

Post Comment
  • 阿V
  • 李亞好會唷
    等我飛黃騰達的時候請幫我設計網站唷啾咪
  • 是會付錢的嗎?
    還是想凹我 XD

    Leah replied in 2012/12/03 10:38

You haven’t logged in yet, please use guest status to leave message. You can also log in with above service account and leave message

other options