欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS實(shí)例:讓頁(yè)腳保持在未滿屏頁(yè)面的底部

互聯(lián)網(wǎng)   發(fā)布時(shí)間:2008-10-17 19:20:27   作者:佚名   我要評(píng)論
  在內(nèi)容不超過(guò)一屏的情況下,當(dāng)瀏覽器窗口變小那行頁(yè)腳文字會(huì)跟著向上浮動(dòng)但還是保持在底部。   當(dāng)內(nèi)容多出一屏?xí)r,他顯示在網(wǎng)頁(yè)的最下邊,而不是窗口的最下邊;測(cè)試了一下,還可以,在IE6、IE7、FF等都沒(méi)有問(wèn)題!窗口縮小時(shí)也沒(méi)有問(wèn)題!   首先是JS腳本:

  在內(nèi)容不超過(guò)一屏的情況下,當(dāng)瀏覽器窗口變小那行頁(yè)腳文字會(huì)跟著向上浮動(dòng)但還是保持在底部。
  當(dāng)內(nèi)容多出一屏?xí)r,他顯示在網(wǎng)頁(yè)的最下邊,而不是窗口的最下邊;測(cè)試了一下,還可以,在IE6、IE7、FF等都沒(méi)有問(wèn)題!窗口縮小時(shí)也沒(méi)有問(wèn)題!
  首先是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();
  查看運(yùn)行效果:
<!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>CSS實(shí)例:讓頁(yè)腳保持在未滿屏頁(yè)面的底部</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>

相關(guān)文章

  • css讓頁(yè)腳始終在底部不論頁(yè)面內(nèi)容多少

    讓頁(yè)腳始終在頁(yè)面底部,不論頁(yè)面內(nèi)容是多或者少頁(yè)腳始終在頁(yè)面底部,在某些情況下這些功能還是比較實(shí)用的,下面為大家介紹下幾種不錯(cuò)的實(shí)現(xiàn)方法,大家可以參考下
    2013-09-06
  • 讓頁(yè)腳緊貼頁(yè)面底部的CSS代碼

    怎么使用Sticky Footer代碼 介紹 Google一下可以找到很多讓頁(yè)腳緊貼頁(yè)面底部的方法,我試過(guò)其中的很多,但他們總會(huì)在某些方面存在一些問(wèn)題。之所以有這些問(wèn)題,可
    2009-12-17
  • css讓頁(yè)腳保持在底部位置的四種方案

    本文主要介紹了css讓頁(yè)腳保持在底部位置的四種方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)
    2022-07-18

最新評(píng)論