DivCSS实例:让页脚保持在未满屏页面的底部_Div+CSS教程
教程Tag:暂无Tag,欢迎添加,赚取U币!
DivCSS实例:让页脚保持在未满屏页面的底部
在内容不超过一屏的情况下,当浏览器窗口变小那行页脚文字会跟着向上浮动但还是保持在底部。
当内容多出一屏时,他显示在网页的最下边,而不是窗口的最下边;测试了一下,还可以,在IE6、IE7、FF等都没有问题!窗口缩小时也没有问题!
首先是JS脚本:
查看运行效果:
在内容不超过一屏的情况下,当浏览器窗口变小那行页脚文字会跟着向上浮动但还是保持在底部。
当内容多出一屏时,他显示在网页的最下边,而不是窗口的最下边;测试了一下,还可以,在IE6、IE7、FF等都没有问题!窗口缩小时也没有问题!
首先是JS脚本:
示例代码 [www.mb5u.com]
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();
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();
查看运行效果:
代码调试框 [www.mb5u.com]
/所属分类:Div+CSS教程/更新时间:2008-06-05
相关Div+CSS教程:
- 相关链接:
- 教程说明:
Div+CSS教程-DivCSS实例:让页脚保持在未满屏页面的底部。