DivCSS實例:讓頁腳保持在未滿屏頁面的底部
在內容不超過一屏的情況下,當瀏覽器窗口變小那行頁腳文字會跟著向上浮動但還是保持在底部。
當內容多出一屏時,他顯示在網頁的最下邊,而不是窗口的最下邊;測試了一下,還可以,在IE6、IE7、FF等都沒有問題!窗口縮小時也沒有問題!
首先是JS腳本:
查看運行效果:
在內容不超過一屏的情況下,當瀏覽器窗口變小那行頁腳文字會跟著向上浮動但還是保持在底部。
當內容多出一屏時,他顯示在網頁的最下邊,而不是窗口的最下邊;測試了一下,還可以,在IE6、IE7、FF等都沒有問題!窗口縮小時也沒有問題!
首先是JS腳本:
function test(){
var infoHeight = document.getElementById("info").scrollHeight;
var bottomHeight = document.getElementById("bottom").scrollHeight;
var allHeight = document.documentElement.clientHeight;
var bottom = document.getElementById("bottom");
if((infoHeight + bottomHeight) < allHeight){
bottom.style.position = "absolute";
bottom.style.bottom = "0";
}else{
bottom.style.position = "";
bottom.style.bottom = "";
}
setTimeout(function(){test();},10);
}
test();
var infoHeight = document.getElementById("info").scrollHeight;
var bottomHeight = document.getElementById("bottom").scrollHeight;
var allHeight = document.documentElement.clientHeight;
var bottom = document.getElementById("bottom");
if((infoHeight + bottomHeight) < allHeight){
bottom.style.position = "absolute";
bottom.style.bottom = "0";
}else{
bottom.style.position = "";
bottom.style.bottom = "";
}
setTimeout(function(){test();},10);
}
test();
查看運行效果:
标签:
推薦設計
優秀海報設計精選集(8)海報設計2022-09-23
充滿自然光線!32平米精致裝修設計2022-08-14
親愛的圖書館 | VERSE雜誌版版式設計2022-07-11
生活,就該這麼愛!2022天海報設計2022-06-02
最新文章
10個CSS簡寫/優化技巧CSS教程2013-06-04
css的margin縮寫方式CSS教程2012-05-23
CSS網頁布局時常犯的幾種CSS教程2009-09-28
CSS浮動屬性Float詳解CSS教程2009-09-17