js让一行页脚保持在底部

测了一下，还可以，在IE6、IE7、FIREOFX等都没有问题！ 窗口缩小时也没有问题！

代码如下:

<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>

www.jb51.net 我们

*{ margin:0; padding:0}
#info{background:#33CCFF}
#bottom{background:#FFCC00;width:100%;}

2
2
2

2
2
2
2
2
2
2
2

2
2
2
2
2

2
2
2
2
2

2
2
2
2
2

2
20000

bottom

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)

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • js让一行页脚保持在底部

    测了一下,还可以,在IE6.IE7.FIREOFX等都没有问题! 窗口缩小时也没有问题! 复制代码 代码如下: <script language="JavaScript" type="text/javascript"> function test(){  var infoHeight = document.getElementById("info").scrollHeight;  var bottomHeight = document

  • Bootstrap 粘页脚效果

    Bootstrap 粘页脚效果

    Bootstrap 粘页脚,说得具体一点就是"将固定高度的页脚紧贴页面底部".由于项目的实际情况和模板有所区别,所以参照模板,小编不能确保快速的完成"粘页脚"的效果,那么还是要给大家分享本教程,写的不好还请各位大侠海涵! 一.页面效果 页面非常简单,注意亮线为火狐边缘,可以很清楚的看到,页脚灰色部分沉浸在页面底部. 二.实例讲解 ①.代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona

  • js 客户端打印html 并且去掉页眉、页脚的实例

    print() 方法用于打印当前窗口的内容,支持部分或者整个网页打印. 调用 print() 方法所引发的行为就像用户单击浏览器的打印按钮.通常,这会产生一个对话框,让用户可以取消或定制打印请求. win10下测试ie11.chrome.firefox.360.edge 都可以成功去掉页眉页脚: <!DOCTYPE html> <html> <head> <title>打印</title> <meta charset="utf-8

  • JS调用打印方法设置页眉页脚的实例

    设置页眉页脚 var HKEY_RootPath="HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"; function PageSetup_del(){ try{ var WSc=new ActiveXObject("WScript.Shell"); HKEY_Key="header"; WSc.RegWrite(HKEY_RootPath+HKEY_

  • js实现页面打印功能实例代码(附去页眉页脚功能代码)

    复制代码 代码如下: <html> <head></head> <style type="text/css" media="screen"> @media print{ .print {display:block;} .notPrint {display:none;} } </style> <script language="javascript"> function pre

  • JQuery Mobile实现导航栏和页脚

    导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). 导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#" data-role="button" data-icon="home">首页</a&g

  • Vue使用driver.js做引导页

    Vue使用driver.js做引导页

    目录 简介及使用教程 特点: 安装 使用 引导页效果 轻量级.无依赖的原生 JavaScript 引擎,可将用户的注意力集中在整个页面上:这是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库. 简介及使用教程 Driver.js是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库.它没有依赖项,支持所有主要浏览器. 特点: 简单:简单易用,完全没有外部依赖 高度可定制:有一个强大的api,可以用于你希望突出显示任何内容 高亮显示:页面功能介绍上的任意

  • 在ASP.NET 2.0中操作数据之十五：在GridView的页脚中显示统计信息

    在ASP.NET 2.0中操作数据之十五：在GridView的页脚中显示统计信息

    导言 除了需要了解产品的单价.库存量和订货量,并按等级排序之外,用户可能还对统计信息感兴趣,比如说平均价格.库存总量等等.这些统计信息常常显示在报表最下面的一个统计行中.GridView控件可以含有一个页脚行,我们可以通过编程将统计数据插入到它的单元格里面去.这个任务给了我们以下3个挑战: 1.配置GridView以显示它的页脚行 2.确定统计数据.即我们应该如何计算平均价格还有库存总量? 3.将统计信息插入到页脚行的相应的单元格中 在本节教程中,我们将会看到如何去征服这些挑战.另外呢,我们将创

  • 在ASP.NET 2.0中操作数据之五十一：从GridView的页脚插入新记录

    在ASP.NET 2.0中操作数据之五十一：从GridView的页脚插入新记录

    导言: 正如教程<概述插入.更新和删除数据>里探讨过的一样, GridView, DetailsView和FormView Web控件都有内置的修改数据的功能.当声明绑定到数据源控件时,可以快速而方便地修改数据--甚至不用写一行代码.不幸的是,只有DetailsView和FormView控件提供了内置的插入.编辑.删除功能,而 GridView控件只支持编辑.删除功能.不过,稍许努力,我们就能使GridView控件包含一个插入界面. 为了给GridView添加插入功能,我们要决定如何添加新记录

  • vue中使用vue-print.js实现多页打印

    本文主要介绍了vue项目中使用print.js打印,解决多页,分页,打印预览样式修改等问题. 引入安装vue-print.js cnpm i vue-printjs --save-dev 解决打印多页只出现一页问题 由于打印插件存在问题,如果打印文件超出一页,只显示一页,所以我们需要修改print.js源文件,所以只能手动下载vue-print.js到本地,做一些修改,然后引入到项目中,不能使用npm安装 下载 print.js https://github.com/zxc19890923/pr

随机推荐