js讓一行頁腳保持在底部
更新時間：2008年04月11日 19:46:46 作者：
所謂保持在底部就是: 在內(nèi)容不超過一屏的情況下, 當瀏覽器窗口變小那行頁腳文字會跟著向上浮動但還是保持在底部。當內(nèi)容多出一屏時，他顯示在網(wǎng)頁的最下邊，而不是窗口的最下邊；
測了一下，還可以，在IE6、IE7、FIREOFX等都沒有問題！ 窗口縮小時也沒有問題！
<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>
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
復(fù)制代碼 代碼如下:
<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>
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
本篇文章主要介紹了js在微信、微博、QQ、Safari喚起App的解決方案，有這方面需要的朋友參考下吧。2018-01-01
這篇文章主要為大家詳細介紹了js實現(xiàn)移動端簡易滑動表格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
在JavaScript的學習中我們經(jīng)常會遇到JavaScript的事件機制,例如事件綁定、事件監(jiān)聽、事件委托（事件代理）等,這篇文章主要給大家介紹了關(guān)于JS綁定事件的3種方法,需要的朋友可以參考下2023-11-11
純js實現(xiàn)重發(fā)驗證碼按鈕倒數(shù)功能
這篇文章主要介紹了純js實現(xiàn)重發(fā)驗證碼按鈕倒數(shù)功能,本文整理了兩個實現(xiàn)代碼,需要的朋友可以參考下2015-04-04
這篇文章主要為大家介紹了js評分組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了如何使用webpack打包一個庫library的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
js動態(tài)調(diào)用css屬性的小規(guī)律及實例說明
本篇文章主要介紹了js動態(tài)調(diào)用css屬性的小規(guī)律及實例說明。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
Java遍歷集合方法分析（實現(xiàn)原理、算法性能、適用場合）
這篇文章主要介紹了Java遍歷集合方法分析（實現(xiàn)原理、算法性能、適用場合）的相關(guān)資料,需要的朋友可以參考下2016-04-04
JavaScript 基礎(chǔ)表單驗證示例(純Js實現(xiàn))
下面小編就為大家?guī)硪黄狫avaScript 基礎(chǔ)表單驗證示例(純Js實現(xiàn))。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了實現(xiàn)51Map地圖接口的示例代碼。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11