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 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
CSS3之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 HTML / CSS
让IE支持HTML5的方法
Dec 11 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
详解HTML5.2版本带来的修改
May 06 HTML / CSS
HTML5公共页面提取作为公用代码的方法
Jun 30 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
JavaScript的漂亮的代码片段
2013/06/05 Javascript
js实时获取系统当前时间实例代码
2013/06/28 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
js中的闭包实例展示
2018/11/01 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
python提取log文件内容并画出图表
2019/07/08 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
大三在校生电子商务求职信
2013/10/29 职场文书
数学专业毕业生自荐信
2013/11/10 职场文书
全国文明单位申报材料
2014/05/31 职场文书
党支部鉴定意见
2015/06/02 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL
详解OpenCV曝光融合
2022/04/29 Python
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python