作者：zishu
http://www.zishu.cn/blogview.asp?logID=711&cateID=3
所谓保持在底部就是: 在内容不超过一屏的情况下, 当浏览器窗口变小那行页脚文字会跟着向上浮动但还是保持在底部。当内容多出一屏时，他显示在网页的最下边，而不是窗口的最下边；
测了一下，还可以，在IE6、IE7、FIREOFX等都没有问题！ 窗口缩小时也没有问题！
<!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>http://www.zishu.cn</title>
<style>
*{ margin:0; padding:0}
#info{background:#33CCFF}
#bottom{background:#FFCC00;width:100%;}
</style>
</head>
<body>
<div id="info">
<br />2<br />2<br />2<br /><br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br /><br />22<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>
分享到：
相关推荐
所谓保持在底部就是: 在内容不超过一屏的情况下, 当浏览器窗口变小那行页脚文字会跟着向上浮动但还是保持在底部。当内容多出一屏时，他显示在网页的最下边，而不是窗口的最下边；
在内容不超过一屏的情况下，当浏览器窗口变小那行页脚文字会跟着向上浮动但还是保持在底部。 当内容多出一屏时，他显示在网页的最下边，而不是窗口的最下边；测试了一下，还可以，在IE6、IE7、FF等都没有问题！...
6.保持页脚在页面底部，而非紧接正文内容 7.保持原文CSS样式 8.便捷自定义设置工具条 9.调用、语法简单，便捷 更过详细技术难点、解决思路、实现过程讲解，及细致的代码注释，本人博文有详细介绍 ...
★利用不间断空格使两个单词保持在同一行文字里 14 ★让光标在段落间快速移动 14 ★巧用“选择性粘贴”中的“无格式文本” 14 ★快速显示文字格式 14 ★在Word中用另类方法复制文本 15 ★去除自动添加的超级链接 15 ...
单击插入——选择页眉/页脚——在最底部选择删除页眉/页脚，就可以把页眉页脚删除。设置完成单击保存就可以了。 第一行缩进：首先选择要设置第一行缩进的段落。单击"开始"菜单选项卡，然后单击工具栏中的"段落...
html2canvas 与 jspdf 相...设置背景色为白色，然后转成图片后，获取截断处图片像素点，从截断处往上一行行扫描像素点颜色，碰到这一行颜色都是全白的，代表是从这里开始截断，将这个高度开始将往下的内容都放到下一页
单击插入——选择页眉 /页脚——在最底部选择删除页眉 /页脚，就可以把页眉页脚删除。设 置完成单击保存就可以了。 首行缩进：首先把要设置首行缩进的段落选中。单击"开始"菜单选项卡，在工具 栏 中的单击"段落...
单击插入——选择页眉/页脚——在最底部选择删除页眉/页脚，就可以把页眉页脚删 除。设置完成单击保存就可以了。 首行缩进：首先把要设置首行缩进的段落选中。单击"开始"菜单选项卡，在工具栏中 的单击"段落对话框...
单击插入一一选择页眉/以脚一一在最底部选择删除页眉/页脚，就可以把页眉页脚 删除。设置完成单击保存就可以了。 首行缩进：首先把要设置首行缩进的段落选中。单击"开始"菜单选项卡，在 工具栏中的单击"段落对话框...
（7）在第一自然段第一行中间文字处插入任意一副剪贴画图片，调整大小适宜，设置环 绕方式为四周型环绕。 （8）设置页面纸张A4，左右页边距1.9厘米，上下页边距3厘米。 完成以上操作后，将该文档以原文件名保存在...
页脚：最初制作此组合的weppage时，我在创建粘性页脚时遇到了麻烦。 但是，既然我对HTML和CSS有了更多的经验，我就可以将页脚放在页面底部。 第二步：身体和内容 ：使用'img-thumbnail'类使图像更具深度，并使用'...
要想在光标 所在行下增加一行的话，那么按___A：Enter键 12、在Word中，当前输入的文字显示在__D：插入点 13、在Word中，可以显示页眉和页脚中的文字的视图格式为 C：页面 14、在Word文档的编辑中，对文字进展字体、...
8、页面选项中增加“保持页脚在页面底部”、“是否套打模板”、“不打印背景图”等选项。 9、增加了批量设置字段别名的方法：SetDataFieldAliasName，使得英文字段在报表中可以用中文展现，更便于最终用户设计报表。...
在此模型中，每行仅显示2张卡片，但如果浏览器较宽，则一行中可能会容纳3张或更多张卡片。 如果缩小，则可能只有1张卡片可见。 每张卡都有设置的像素大小，例如300px x 250px，但可以根据需要轻松更改。 实例化时...
D、在进行分栏前先将要进行分栏操作的文字选中 7、页脚位于文档的（ ） A、顶部 B、底部 C、中部 D、任意位置 8、页眉位于文档的（ ） 顶部 B、底部 C、中部 D、任意位置 9、双击段落旁边的选定栏，则选定了（ ） 一...
根据一天中的时间问候的时间和日期使用自然语言打开的灯和开关根据天气情况使用表情符号显示温度重要日历信息其他条件警报 侧栏页脚底部的三个图标按顺序排列控制机器人真空的卡Monitor Home Assistant ， 平板电脑...
《计算机应用基础》Word试题 "题号"题目 "答案 "难度 " "1 "在Word 2003中，"表格和边框"工具栏可从______菜单下调出 "D "* " " "A．... Word 2003表格中每次只能插入一行 " " " "17 "在Word 2003文档编辑
虽然主题集成了近期留言独立模板，不过该页面不能留言，如果你想弄个什么留言板，那就新建一个页面，起个标题名称叫“留言板”就行了，让大家在这个没有任何意义的页面死劲留言吧！ ■ 通栏分类模版 主题中有一个...