所謂 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，有待各位勇者測試。
以上
當內容高度尚未填滿瀏覽器視窗高度時，footer 依然會顯示在視窗的最下方；而當內容超過瀏覽器視窗高度時，會延伸內容區塊且緊接著 footer 區塊。
實際範例：New CSS Sticky Footer (可縮放視窗高度以預覽置底效果)
html 語法編輯如下：
css 語法編輯如下：
這樣的技巧運用的其實就是 min-height 的特性，在主要區塊設定 min-height 為 100% 後再加上 padding-bottom 的空白，然後將 footer 往上位移相等高度而達成。
缺點：
footer 必須固定高度而無法製作成依照內容多寡而增減之彈性高度
不過基於大部分 footer 的內容都很固定，所以其實這樣的問題也就相對可以無視 (?)
由於此設定並未實際測試各瀏覽器，大膽判斷不支援 IE6 以下。
其餘瀏覽器大致上應該 OK，有待各位勇者測試。
以上
文章標籤
全站熱搜
留言列表
My Life (9)