JavaScript:

<script type="text/javascript">
$(function(){
function footerPosition(){
$("footer").removeClass("fixed-bottom");
//网页正文全文高度
var contentHeight = document.body.scrollHeight,
//可视窗口高度,不包括浏览器顶部工具栏
winHeight = window.innerHeight;
if(!(contentHeight > winHeight)){
//当网页正文高度小于可视窗口高度时,为footer添加类fixed-bottom
$("footer").addClass("fixed-bottom");
} else {
$("footer").removeClass("fixed-bottom");
}
}
footerPosition();
$(window).resize(footerPosition);
});
</script>

CSS:

.fixed-bottom {
position: fixed;
bottom:;
width:100%;
}

HTML5将footer置于页面最底部的方法(CSS+JS)的更多相关文章

  1. HTML的footer置于页面最底部的方法

    方法一:footer高度固定+绝对定位 <html> <head> <style type="text/css"> html{height:%; ...

  2. HTML的footer置于页面最底部

    vue项目中,使用element-ui的布局,仍然出现footer不固定页面底部的情况,网上找到的一个管用的 方法是:footer高度固定+绝对定位 <html> <head> ...

  3. [JavaScript] css将footer置于页面最底部

    <!-- 父层 --> <div id="wapper"> <!-- 主要内容 --> <div id="main-conten ...

  4. 记一些让footer始终位于网页底部的方法

    上次说把网页的头部和尾部分离出来作为一个单独的文件,所有网页共用,这样比较方便修改,然而,,,我发现某些方法里尾部会紧跟在头部后面,把内容挤在下面..而且有的页面内容少的话不能把尾部挤到最下面,所以, ...

  5. footer始终在页面最底部的方法(问题待检验)

    一.css方法 <style type="text/css"> html,body{ height: 100%; } body{ display: flex; flex ...

  6. jfinal框架页面找不到相关css,js文件404

    在JFinalConfig中添加配置: @Override public void configHandler(Handlers handlers) { handlers.add(new Contex ...

  7. 将HTML页面页脚固定在页面底部(多种方法实现)

    当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...

  8. js jquery 页面加载初始化方法

    js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...

  9. iframe中 父页面和子页面查找元素的方法

    从父页面中查找iframe子页面中对象的方法:JS: document.getElementById('iframe').contentWindow //查找iframe加载的页面的window对象 ...

随机推荐

  1. 关于easyui Datagrid一些样式记录

    此篇文章主要记录在使用datagrid中常见的修改样式方式以及样式效果配图!!!! 一丶存在选中框的时候标题栏合并显示序号字段. 代码展示: onLoadSuccess: function (data ...

  2. Python_CRC32

    #计算文件的CRC32值 import sys import zlib import os.path filename=sys.argv[1] print(filename) if os.path.i ...

  3. PAT1081:Rational Sum

    1081. Rational Sum (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Given N ...

  4. Myeclipse10.7.1 导出war包报错

    myeclipse10.7.1 导出war问题解决办法myeclipse10破解后,导出war包时报"SECURITY ALERT: INTEGERITY CHECK ERROR" ...

  5. S3C6410板子移植 Android2.2

    一:Android简介 1.什么是Android: Android是一种基于linux的自由及开放源代码的操作系统,主要适用于移动设备,如智能手机和平板电脑,是由google公司和开放手机联盟领导和开 ...

  6. js实现html截图生成图片

      没有华丽的开场,直入主题,这就是题主随笔风格.随笔既是日常工作积累,也可理解是个工作笔记,方便日后用到之处快速的有方可寻.   先讲一个需求场景: 定制网页截图传给服务器端保存,用户关注公众号后自 ...

  7. MFC中listbox控件中各种属性的详解

     ListBox控件是Windows 窗体的一个空间,ListBox 控件显示一个项列表,用户可从中选择一项或多项.      如果项总数超出可以显示的项数,则自动向 ListBox 控件添加滚动条. ...

  8. BZOJ_1954_Pku3764 The xor-longest Path_Trie树

    Description 给定一棵n个点的带权树,求树上最长的异或和路径 把根到点路径上点权异或和求出来,然后变成了Trie树裸题.   代码: #include <cstdio> #inc ...

  9. POJ_2104_K-th Number_主席树

    POJ_2104_K-th Number_主席树 题意:给定一个长度为n的序列,m次询问区间第k小 分析: 主席树模板 主席树可以理解成为n棵权值线段树的前缀和 但我们不能建n棵线段树,只需要对于每个 ...

  10. 【Unity游戏开发】AssetBundle杂记--AssetBundle的二三事

    一.简介 马三在公司大部分时间做的都是游戏业务逻辑和编辑器工具等相关工作,因此对Unity AssetBundle这块的知识点并不是很熟悉,自己也是有打算想了解并熟悉一下AssetBundle,掌握一 ...