详解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 相关文章推荐
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
css3 按钮 利用css3实现超酷下载按钮
Mar 18 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
May 09 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 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
Zerg兵种介绍
2020/03/14 星际争霸
PHP学习之正则表达式
2011/04/17 PHP
比较详细PHP生成静态页面教程
2012/01/10 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
python多重继承实例
2014/10/11 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
如何使用python代码操作git代码
2020/02/29 Python
python实现微信打飞机游戏
2020/03/24 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
竟聘演讲稿范文
2013/12/31 职场文书
教师绩效考核方案
2014/01/21 职场文书
个人函授自我鉴定
2014/03/25 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
健康状况证明模板
2014/10/23 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
珍爱生命主题班会
2015/08/13 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
sass 常用备忘案例详解
2021/09/15 HTML / CSS
各种货币符号快捷输入
2022/02/17 杂记