详解HTML5将footer置于页面最底部的方法(CSS+JS)


Posted in HTML / CSS onOctober 11, 2018

本文介绍了详解HTML5将footer置于页面最底部的方法(CSS+JS),分享给大家,具体如下:

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: 0;
    width:100%;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS教程:CSS3圆角属性
Apr 02 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
Nov 14 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
Feb 07 HTML / CSS
使用phonegap创建联系人的实现方法
Mar 30 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 24 HTML / CSS
HTML5实现签到 功能
Oct 09 #HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 #HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 #HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 #HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 #HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
Sep 19 #HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
Sep 17 #HTML / CSS
You might like
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
js实现随机8位验证码
2020/07/24 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
使用python实现baidu hi自动登录的代码
2013/02/10 Python
Python探索之Metaclass初步了解
2017/10/28 Python
Python高斯消除矩阵
2019/01/02 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
澳大利亚在线奢侈品时尚零售平台:Azura Runway
2021/01/13 全球购物
C#面试问题
2016/07/29 面试题
劳资员岗位职责
2013/11/11 职场文书
客服文员岗位职责
2013/11/29 职场文书
物业保安主管岗位职责
2013/12/25 职场文书
厕所文明标语
2014/06/11 职场文书
迎新生欢迎词
2015/01/23 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript