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. 回忆一下我的运维时期 关于Impact的架构服务器集群

    Impact EDMP平台  Email Direct Marketing Platfrom   电子邮件营销平台 EDM 是 Email Direct Marketing 的缩写,即电子邮件营销,简 ...

  2. Python_zip&rar

    import zipfile fp=zipfile.ZipFile('/Users/c2apple/Desktop/彩屏/旭威XW-6600.zip','r') for f in fp.filelis ...

  3. iOS 波浪效果的实现

    iOS 波浪效果的实现 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #4f8187; background-c ...

  4. 非常适用的Sourceinsight插件,提高效率【强力推荐】

    转自:http://www.cnblogs.com/heiyue/p/6225975.html 一直使用sourceinsight编辑C/C++代码,sourceinsight是一个非常好用的编辑工具 ...

  5. mondrian 4.7 源码部署

    mondrian是一个开源的数据分析工程, 网上有关mondrian3.X的源码部署比较多, 有关4.X的部署较少. 目前官方推荐使用的时mondrian3.7的修订版, 可以再github上下载到最 ...

  6. c语言常见的几种排序方法总结

    一:选择排序和冒泡排序 这两种排序比较简单,直接贴出代码: #include <stdio.h> void choose_sort(int *arr, int n); void bubbl ...

  7. 在Windows下同时安装Python2.x和Python3.x

    前言: Python现在是两个版本共存,Python2.x和Python3.x都同时在更新.但是Python2.x和Python3.x的区别还是很多的(以后我可能会写一篇文章列举一下Python2.x ...

  8. Windows Defender Service 是选择Windows 10系统的最大障碍!

    今天从早上开始,Windows Defender Service服务从CPU消耗资源30%一直上升到60%并且无法下降. 我一直使用的是Windows 10 Enterprise 2016长期服务支持 ...

  9. Scrapy 1.4 文档 04 例子

    最好的学习方法是举例说明,Scrapy也不例外. 因此,我们有一个名为 quotesbot 的 Scrapy 项目,您可以通过它来学习更多关于 Scrapy 的知识. 它包含两个用于http://qu ...

  10. 'version' contains an expression but should be a constant

    [WARNING] Some problems were encountered while building the effective model for com.app:cache:jar:4. ...