详解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媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
Apr 03 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 HTML / CSS
css3 实现滚动条美化效果的实例代码
Jan 06 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
Mar 07 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 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作的文本留言本的例子(五)
2006/10/09 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
从vue源码看props的用法
2019/01/09 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
Python ZipFile模块详解
2013/11/01 Python
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
英国女性时尚品牌:Apricot
2018/12/04 全球购物
如何设置Java的运行环境
2013/04/05 面试题
iostream与iostream.h的区别
2015/01/16 面试题
电子信息科学专业自荐信
2014/01/30 职场文书
设计师个人求职信范文
2014/02/02 职场文书
工作违纪检讨书
2014/02/17 职场文书
难忘的一课教学反思
2014/04/30 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
红色经典观后感
2015/06/18 职场文书