您现在的位置是：网站首页> 编程资料编程资料
CSS实例:让页脚保持在未满屏页面的底部_CSS教程_CSS_网页制作_
2021-09-10
913人已围观
简介 在内容不超过一屏的情况下，当浏览器窗口变小那行页脚文字会跟着向上浮动但还是保持在底部。 当内容多出一屏时，他显示在网页的最下边，而不是窗口的最下边；测试了一下，还可以，在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();
查看运行效果：
2
2
2
2
2
2
2
2
2
2
2
20000
bottom
相关内容
- 优化CSS在网页中的加载方式_CSS教程_CSS_网页制作_
- Web标准:关于web标准的一些初学的知识_Web标准教程_CSS_网页制作_
- 完全掌握纯CSS布局网页_CSS布局实例_CSS_网页制作_
- 网页注册表单的网页设计技巧_CSS教程_CSS_网页制作_
- CSS控制表格文字样式的研究_CSS教程_CSS_网页制作_
- DIV CSS常用的网页布局代码_CSS布局实例_CSS_网页制作_
- dl,dt,dd,ul,li,ol区别及应用_CSS教程_CSS_网页制作_
- css教程:CSS文件应该保持整洁和统一_CSS教程_CSS_网页制作_
- 关于CSS 框架的论述_CSS教程_CSS_网页制作_
- CSS编写中灵活运行注释的意义_CSS教程_CSS_网页制作_
