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