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. 解决jequry使用keydown无法跳转的问题

    问题描述 代码 <script> $("document").ready(function() { $("#button").click(funct ...

  2. (Lesson2)根据类名称和属性获得元素-JavaScript面向对象

    描述:在编写选择器的时候遇到的一根问题,我需要实现Jquery的选择器功能,第一个根据ID获取Element非常简单,第二个根据类(class)去获取Element集合,这个相对复杂,而根据name和 ...

  3. IntelliJ IDEA maven 构建简单springmvc项目

    环境: apache-tomcat-8.5.15 jdk1.8.0_172 IDEA 建立一个maven-webapp项目:Create New Project 后点击next 然后next 可以选择 ...

  4. Java 的字节流文件读取(一)

    上篇文章我们介绍了抽象化磁盘文件的 File 类型,它仅仅用于抽象化描述一个磁盘文件或目录,却不具备访问和修改一个文件内容的能力. Java 的 IO 流就是用于读写文件内容的一种设计,它能完成将磁盘 ...

  5. Map集合的便利学习总结

    1.Map提供了三种便利方式 1)遍历所有key. Set<K>  keySet()  该方法会将当前Map中所有key存入一个Set集合后返回. 2)遍历所有的key-value对 Se ...

  6. 计算机网络相关:应用层协议(一):DNS

    DNS 1.概念  DNS是:  1)  一个有分层的DNS服务器实现的分布式数据库  2)一个使得主机能够查询分布式数据库的应用协议.  它运行在UDP之上,默认使用53号端口.  主要功能 是将主 ...

  7. 对于Javascript 执行上下文的理解

    转载无源头地址 在这篇文章中,将比较深入地阐述下执行上下文 – JavaScript中最基础也是最重要的一个概念.相信读完这篇文章后,你就会明白javascript引擎内部在执行代码以前到底做了些什么 ...

  8. strace详解及实战

    详细参数: -c 统计每一系统调用的所执行的时间,次数和出错的次数等. -d 输出strace关于标准错误的调试信息. -f 跟踪由fork调用所产生的子进程. -ff 如果提供-o filename ...

  9. ETCD相关介绍--整体概念及原理方面

    etcd作为一个受到ZooKeeper与doozer启发而催生的项目,除了拥有与之类似的功能外,更专注于以下四点. 简单:基于HTTP+JSON的API让你用curl就可以轻松使用. 安全:可选SSL ...

  10. box-shadow 详解及示例

    box-shadow  [bɑks] - [ˈʃædoʊ]   英文示意: box:盒,包厢 shadow:阴影,渐变   定义: box-shadow: none | <shadow> ...