详解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制作立体效果导航菜单
Jan 12 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 HTML / CSS
html5 兼容IE6结构的实现代码
May 14 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 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中目录,文件操作详谈
2007/03/19 PHP
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
JavaScript格式化数字的函数代码
2010/11/30 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
JavaScript中的编码和解码函数
2017/02/15 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
python shell根据ip获取主机名代码示例
2017/11/25 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
python实现梯度下降法
2020/03/24 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
详解python程序中的多任务
2020/09/16 Python
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
劳资协议书范本
2014/04/23 职场文书
酒店端午节活动方案
2014/08/26 职场文书
2015个人半年总结范文
2015/03/09 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
红色故事汇观后感
2015/06/18 职场文书
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技