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. 免费Git客户端:sourcetree详细介绍

    一.简介:一个用于Windows和Mac的免费Git客户端.Sourcetree简化了如何与Git存储库进行交互,这样您就可以集中精力编写代码.通过Sourcetree的简单Git GUI可视化和管理 ...

  2. 杨老师课堂_Java核心技术下之控制台模拟微博用户注册案例

    案例设计背景介绍: 编写一个新浪微博用户注册的程序,要求使用HashSet集合实现.  假设当用户输入用户名.密码.确认密码.生日(输入格式yyyy-mm-dd为正确).手机号码(手机长度为11位,并 ...

  3. ECS上搭建Docker(CentOS7)

    本文讲述Docker在CentOS系统上的部署过程.Ubuntu系统下安装docker,您可以点击此处查看.更多详细的实践您可以参考docker实践文档 适用对象 适用于熟悉Linux操作系统,刚开始 ...

  4. Android 深入理解Android中的自定义属性

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/45022631: 本文出自:[张鸿洋的博客] 1.引言 对于自定义属性,大家肯定 ...

  5. Python List 删除元素

    1. 使用del删除指定元素 li = [1, 2, 3, 4] del li[3] print(li) # Output [1, 2, 3] 2. 使用list方法pop删除元素 li = [1, ...

  6. consistent.go 源码阅读

    ) > len(c.circle) {         hashes = nil     }     for k := range c.circle {         hashes = app ...

  7. nsq源码阅读笔记之nsqd(四)——Channel

    与Channel相关的代码主要位于nsqd/channel.go, nsqd/nsqd.go中. Channel与Topic的关系 Channel是消费者订阅特定Topic的一种抽象.对于发往Topi ...

  8. Stackoverflow 最受关注的 10 个 Java 问题

    Stack Overflow 是一个大型的编程知识库.在 Stack Overflow 中已经有数以百万计的问题,并且很多答案有着很高的质量.这就是为什么 Stack Overflow 的答案经常位于 ...

  9. ThreadPoolExecutor简介

    ThreadPoolExecutor简介 并发包中提供的一个线程池服务 23456789 public ThreadPoolExecutor(int corePoolSize,//线程池维护线程的最少 ...

  10. BZOJ_1801_[Ahoi2009]chess 中国象棋_DP

    BZOJ_1801_[Ahoi2009]chess 中国象棋_DP Description 在N行M列的棋盘上,放若干个炮可以是0个,使得没有任何一个炮可以攻击另一个炮. 请问有多少种放置方法,中国像 ...