所謂 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,有待各位勇者測試。

以上
arrow
arrow
    文章標籤
    css html footer 置底
    全站熱搜

    Leah 發表在 痞客邦 留言(1) 人氣()