html页脚显示不出来,CSS实例:让页脚保持在未满屏页面的底部
CSS实例:让页脚保持在未满屏页面的底部
互联网 发布时间: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();
查看运行效果:
CSS实例:让页脚保持在未满屏页面的底部
*{ margin:0; padding:0}
#info{background:#33CCFF}
#bottom{background:#FFCC00;width:100%;}
2
2
2
2
2
2
2
2
2
2
2
20000
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设置body背景图片满屏的实例代码,需要的朋友可以参考下2018-02-26
最新评论
html页脚显示不出来,CSS实例:让页脚保持在未满屏页面的底部相关推荐
- 页脚保持在未满屏页面的底部
最近有这样一个需求,就是说在页面内容不够丰富的情况下,我们得让页脚始终保持在页面的底部. bala,bala... 在网上寻觅了一下,最终还是赏识用js解决的这款. 不闲扯,贴码show html部分 ...
- WORD中如何设置前几页不显示页码,同时更改总页数
word文档在同一文件中插入页码时,总是从第一页到末页顺序编码,但我这一文件从第1-4页为"提纲"或者"前言",不需编页码,从第5页开始才是正文,那么怎样才能使 ...
- wps页眉显示一级标题_WPS的word页眉内添加的文字怎么和1挨着
以下是Word2003自动生成目录的方法,希望可以帮到朋友们: 首先要定义目录项,点击"视图"→"大纲"切换至大纲模式,大纲模式下文档各段落的级别显示得清楚,选 ...
- Word第1、2页不显示页码,从第3页开始显示页码
在要编辑的word里头,把光标移到第3页,在"页面布局"下有个"分隔符"菜单,点开该菜单,在"分节符"里头选定"下一页" ...
- 将页脚保持在页面的底部——Javascript+Css实现
功能:无论将浏览器拖大或拉小,将页脚DIV块保持在页面的底部 1.将Javascript代码和DIV/CSS代码写在同一个文件里: <!DOCTYPE html PUBLIC "-// ...
- 让dedecms栏目页标题显示页码数
让DedeCMS的栏目页标题显示页码数,在列表页的标题上中上页数使列表页的标题不重复这样更利于优化. 标签为:{dede:pagelist listsize='0' listitem='pageno' ...
- 名编辑电子杂志大师教程 | 如何一页页的单页单面显示电子杂志?
在名编辑电子杂志大师里,如果希望制作的电子杂志是一页页的单页单面显示的,而不是双页翻页显示,也就是无论翻到哪一页,都只显示一面,有以下两种方法可以做到. 方法一:单页功能 除了Neat模板不支持以外, ...
- html图片多tab切换代码,CSS实现Tab页切换实例代码
1.hover 移入其父元素.navI时,触发鼠标的hover态,给父元素添加样式为position:relative;z-index:1;.从而提升了层级z-index.在其子元素导航内容的层级比拼 ...
- CSS + DIV 让页脚始终保持在页面底部
来源:David's Blog http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...
最新文章
- div块内的CSS中心文本(水平和垂直)
- C语言printf与scanf函数
- 简单安装Harbor私有镜像仓库
- 为什么我们总是忍不住要刷微信?
- Linux 系统应用编程——网络编程(TCP 协议三次握手过程)
- 前端学习(3238):react生命周期4
- Python:random库使用方法
- HCIE Security 华为WAF产品 备考笔记(幕布)
- Oracle DBHelper 第二版
- android 点击屏幕 回调,Android 点击回调传递
- 现代操作系统 第三章 内存管理 习题答案
- adobe illustrator 菜单中英文对照
- 配置javaw.exe双击运行jar包
- EGO1—实现计数器74HC163
- 微信支付实战(完整的代码,复制即可用)
- 不会吧不会吧,不会真有人还不会算时间复杂度吧?用十分钟让你明白如何计算时间复杂度
- 如何将QRcode二维码的定位标做成圆形
- SAP 公司间标准委外流程
- EasyExcel基础使用教程
- 简单易学的推箱子源代码大放送
热门文章
- Tiled编辑器不能打开.tmx文件的问题
- Android4.2中Phone的P-sensor的应用的分析。
- 分布式链路追踪工具skywalking 介绍
- CentOS4.4平台下安装EXTMAIL手记V1.3
- Android RoboGuice开源框架、Butter Knife开源框架浅析
- bootstrap - navbar
- webStorm部分以及重要快捷键
- 《从零开始学Swift》学习笔记(Day 39)——构造函数重载
- apache开源项目--nutch
- 学习mongoDB的一些感受(转自:http://blog.csdn.net/liusong0605/article/details/11581019)