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弹性盒模型开发笔记(一)
Apr 26 HTML / CSS
CSS3 选择器 基本选择器介绍
Jan 21 HTML / CSS
CSS3实现闪烁动画效果的方法
Feb 09 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
HTML5制作表格样式
Nov 15 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 HTML / CSS
详解android与HTML混合开发总结
Jun 06 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
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
php给数组赋值的实例方法
2019/09/26 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
办公室主任职责范文
2013/11/08 职场文书
成品仓管员工作职责
2013/12/29 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
销售顾问岗位职责
2014/02/25 职场文书
小学清明节活动方案
2014/03/08 职场文书
公务员培的训心得体会
2014/09/01 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
小学语文复习计划
2015/01/19 职场文书
无线电通信名词解释
2022/02/18 无线电
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技