详解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 相关文章推荐
CSS3五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
css3闪亮进度条效果实现思路及代码
Apr 17 HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 HTML / CSS
基于css3的属性transition制作菜单导航效果
Sep 01 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
May 04 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 HTML / CSS
Css预编语言及区别详解
Apr 25 HTML / CSS
详解CSS不受控制的position fixed
May 25 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导入导出excel实例
2013/10/25 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
Python3中的真除和Floor除法用法分析
2016/03/16 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
python中嵌套函数的实操步骤
2019/02/27 Python
python装饰器使用实例详解
2019/12/14 Python
python在协程中增加任务实例操作
2021/02/28 Python
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
毕业生怎样写好自荐信
2013/11/11 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android