设计之家 > 教程 > 網頁教程 > CSS教程 >

Div+CSS實例教程:讓頁腳保持在未滿屏頁面的底部

作者:佚名 來源:網絡 時間:2008-04-02
DivCSS實例:讓頁腳保持在未滿屏頁面的底部

  在內容不超過一屏的情況下,當瀏覽器窗口變小那行頁腳文字會跟著向上浮動但還是保持在底部。
  當內容多出一屏時,他顯示在網頁的最下邊,而不是窗口的最下邊;測試了一下,還可以,在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();

  查看運行效果:


    [ 可先修改部分代碼 再運行查看效果 ]
标签:

相關文章:

推薦設計

最新文章