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

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> 關於CSS >> Div+CSS實例教程：讓頁腳保持在未滿屏頁面的底部

編輯：關於CSS

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();
　　查看運行效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>DivCSS實例：讓頁腳保持在未滿屏頁面的底部</title><style>*{ margin:0; padding:0}#info{background:#33CCFF}#bottom{background:#FFCC00;width:100%;}</style></head><body><div id="info">2<br />2<br />2<br />2<br />2<br /><br />2<br />2<br />2<br />2<br />2<br /><br />2<br />20000</div><div id="bottom">bottom</div><script language="JavaScript" type="text/javascript">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();</script></body></html>

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

上一頁:Div+CSS教程：如何閉合浮動元素？
下一頁:Div CSS實例教程：頁面制作方法

關於CSS

常用CSS縮寫語法總結: 使用縮寫可以幫助減少你CSS文件的大小，更加容易閱讀。css縮寫的主要規則如下：顏色16進制的色彩值
DIV下圖片自適應解決方法: 以前的解決方法主要是利用js來實現，但用過的人都知道該辦法有點繁瑣。還有一種是在外部容器定義over
用純CSS實現禁止鼠標點擊事件示例代碼: JavaScript有一個preventDefault方法, 他可用以來取消事件的默認動作。比如取消

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

小編推薦

CSS如何控制網頁(WEB)字體利用CSS3實現的文字定時向上滾動 CSS3實現鼠標懸停顯示擴展內容 8個簡單實用的CSS秘訣 DIV+CSS常見的錯誤 CSS產生的特殊效果無需JS和jQuery代碼實現CSS3鼠標浮動放大圖片淺談CSS中的繼承性,特殊性,層疊性和重要性 CSS更改鼠標為手狀樣式 CSS3繪制六邊形的簡單實現

DIV CSS 佈局教程網

相關文章