html粘性页脚的具体使用


Posted in HTML / CSS onJanuary 18, 2022

本学期在软件设计大作业时要实现一个粘性页脚功能,即不管页面内容怎么变,页脚始终要滑到页面的最下方才能出现。

本次作业采用bootstrap框架

网上方法

1、html标签

将html显示高度占满(class=“h-100”)。

<html lang="en" class="h-100">

2、body标签
设置body弹性布局,并将高度占满(class=“d-flex flex-column h-100”)。

<body class="d-flex flex-column h-100">

3、main标签

将main设置为不同的屏幕设备不设置收缩(role=“main” class=“flex-shrink-0”)。

<main role="main" class="flex-shrink-0">

弹性收缩规则:

  • flex-shrink-0 不同的屏幕设备不设置收缩
  • flex-shrink-1 不同的屏幕设备设置收缩

4、footer标签

设置footer顶部边框高度自动设置(class=“mt-auto”)。

<footer class="footer mt-auto py-3">

但我试了一下在我这都不能实现预期的效果。

解决方法

可通过判断$(window)和$(document)的关系来为footer添加"fixed-bottom"class
$(window).height()代表了当前可见区域的大小,
$(document).height()则代表了整个文档的高度,可视具体情况使用.
可根据它们两个之间的关系来决定是否添加改class。
页脚如下所示:

<footer class="mt-auto py-3 bg-dark" id="footer">
    <div class="container">
        <p class="m-0 text-center text-muted">Copyright &copy; Blog 2021</p>
    </div>
</footer>

动态添加"fixed-bottom"class

if($(window).height() == $(document).height()){
        $("#footer").addClass("fixed-bottom");
   }else{
         $("#footer").removeClass("fixed-bottom");
   }

注意:如果 $(window).height() 获取的不是窗口的高度而是文档文本高度,也就是 (window).height()(document).height返回值一样。那就是因为DOCTYPE没写造成的。

请检查html标签,改成,就OK了。

为此专门查了一下的作用:

DOCTYPE是document type(文档类型)的简写,在web设计中用来说明你用的XHTML或者HTML是什么版本。其中的DTD叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的DTD来解释你页面的标识,并展现出来。特别是没有声明或声明不正确将在标准浏览器下更是不能正常显示。

要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。

网页中用了 <!DOCTYPE html> 就表示该页面采用了W3C标准,这样做可以增强页面的兼容性,降低对浏览器的依赖性。

不加这一行,就表示页面采用浏览器本身的解析标准,这样会造成页面在不同的浏览器(IE、火狐等)可能出现不同的显示效果。

也许这个解释能说明一定的原因。 定义DOCTYPE是个好习惯,也希望大家能写出标准规范的代码!

到此这篇关于html粘性页脚的具体使用的文章就介绍到这了,更多相关html粘性页脚内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 HTML / CSS
用css3写出气球样式的示例代码
Sep 11 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 #HTML / CSS
使用CSS设置滚动条样式
在CSS中使用when/else的方法
Jan 18 #HTML / CSS
CSS使用伪类控制边框长度的方法
浅谈css实现背景颜色半透明的两种方法
Dec 06 #HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 #HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
You might like
php mssql 数据库分页SQL语句
2008/12/16 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
google广告之另类js调用实现代码
2020/08/22 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
基python实现多线程网页爬虫
2015/09/06 Python
Python中操作符重载用法分析
2016/04/29 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
int和Integer有什么区别
2013/05/25 面试题
档案管理员岗位职责
2013/12/01 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
音乐器材管理制度
2014/01/31 职场文书
社区消防工作实施方案
2014/03/21 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
党员演讲稿
2014/09/04 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
假期安全教育广播稿
2014/10/04 职场文书
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis