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教程(1):什么是CSS3
Apr 02 HTML / CSS
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
为你的html5网页添加音效示例
Apr 03 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 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 uniqid函数生成唯一ID
2015/11/18 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
斜45度寻路实现函数
2009/08/20 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
JS随机密码生成算法
2019/09/23 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
python占位符输入方式实例
2019/05/27 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
什么是组件架构
2016/05/15 面试题
建筑专业自我鉴定
2013/10/22 职场文书
中考冲刺决心书
2014/03/11 职场文书
军训口号
2014/06/13 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android