您现在的位置是：网站首页> 编程资料编程资料

CSS实例:让页脚保持在未满屏页面的底部_CSS教程_CSS_网页制作_

2023-11-04 192人已围观

简介　　在内容不超过一屏的情况下，当浏览器窗口变小那行页脚文字会跟着向上浮动但还是保持在底部。　　当内容多出一屏时，他显示在网页的最下边，而不是窗口的最下边；测试了一下，还可以，在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();
　　查看运行效果：

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

2
2
2
2
2

2
2
2
2
2

2
20000

bottom

上一篇：优化CSS在网页中的加载方式_CSS教程_CSS_网页制作_

下一篇：IE8、IE7、IE6、FF简单的CSS HACK测试_浏览器兼容教程_CSS_网页制作_

您现在的位置是：网站首页> 编程资料编程资料

CSS实例:让页脚保持在未满屏页面的底部_CSS教程_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢