CSS实例:让页脚保持在未满屏页面的底部

ttx9n · 发表于 2008-10-17 19:20:27

　　在内容不超过一屏的情况下，当浏览器窗口变小那行页脚文字会跟着向上浮动但还是保持在底部。　　当内容多出一屏时，他显示在网页的最下边，而不是窗口的最下边；测试了一下，还可以，在IE6、IE7、FF等都没有问题！窗口缩小时也没有问题！　　首先是JS脚本：
　　在内容不超过一屏的情况下，当浏览器窗口变小那行页脚文字会跟着向上浮动但还是保持在底部。
　　当内容多出一屏时，他显示在网页的最下边，而不是窗口的最下边；测试了一下，还可以，在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>CSS实例:让页脚保持在未满屏页面的底部</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>

u6h2m4 · 发表于 2022-8-8 14:15:05

谢谢分享，先下来用用

v3sfsi · 发表于 2022-10-23 12:17:13

可以，看卡巴

3mfwk4yf · 发表于 2022-11-6 06:39:30

很不错的源码论坛

lba36h7g · 发表于 2022-11-25 22:26:26

看看看看

errol123 · 发表于 2023-2-22 04:59:58

很不错的玩意

e5plu · 发表于 2023-4-9 06:02:30

2222222222222222

v3sfsi · 发表于 2023-8-2 04:09:01

我要金豆金豆金豆

dingzhi521 · 发表于 2023-10-17 18:19:39

需要很久了终于找到了

wqpa63gz · 发表于 2023-10-18 21:18:43

看看看看看看看看看看看看看看看看看看看看看看看看看看看

账号		自动登录	找回密码
密码			立即注册

[CSS] CSS实例:让页脚保持在未满屏页面的底部