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实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
Dec 13 HTML / CSS
html5 的a标签 Href 拨电话的写法
Nov 04 HTML / CSS
HTML5注册页面示例代码
Mar 27 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 HTML / CSS
HTML5添加禁止缩放功能
Nov 03 HTML / CSS
微信端html5页面调用分享接口示例
Mar 14 HTML / CSS
canvas进阶之如何画出平滑的曲线
Oct 15 HTML / CSS
video.js支持m3u8格式直播的实现示例
May 20 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
德生PL330的评价与改造
2021/03/02 无线电
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
php表单敏感字符过滤类
2014/12/08 PHP
如何实现JS函数的重载
2006/09/22 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
go和python变量赋值遇到的一个问题
2017/08/31 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
python中提高pip install速度
2020/02/14 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
德国购买健身器材:AsVIVA
2017/08/09 全球购物
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
毕业生自荐书
2013/12/18 职场文书
擅自离岗检讨书
2014/09/12 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python
redis数据一致性的实现示例
2022/03/18 Redis