详解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 相关文章推荐
收集的7个CSS3代码生成工具
Apr 17 HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
Jul 19 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
Jul 26 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
Sep 30 HTML / CSS
CSS3实现指纹特效代码
Mar 17 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
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
下载糗事百科的内容_python版
2008/12/07 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
python实现udp传输图片功能
2020/03/20 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
Python自动创建Excel并获取内容
2020/09/16 Python
美国宠物商店:Wag.com
2016/10/25 全球购物
小学生安全演讲稿
2014/04/25 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
生日祝酒词大全
2015/08/10 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers