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背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 HTML / CSS
利用css3制作3D样式按钮实现代码
Mar 18 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
Css3实现无缝滚动防抖
Sep 14 HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 HTML / CSS
css3 实现滚动条美化效果的实例代码
Jan 06 HTML / CSS
HTML5地理定位实例
Oct 15 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 HTML / CSS
用canvas显示验证码的实现
Apr 10 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文本操作类
2006/11/25 PHP
php下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
php PDO异常处理详解
2016/11/20 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
javascript smipleChart 简单图标类
2011/01/12 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
Pytorch的mean和std调查实例
2020/01/02 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
Python字典实现伪切片功能
2020/10/28 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
weblogic面试题
2016/03/07 面试题
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
低碳生活的宣传标语
2014/06/23 职场文书
元旦晚会开场白
2015/05/29 职场文书
CAD实训总结范文
2015/08/03 职场文书
Matlab如何实现矩阵复制扩充
2021/06/02 Python