30. 如何确保页脚始终位于页面底部? & 弹跳加载器

最新推荐文章于 2024-10-06 23:37:55 发布
最新推荐文章于 2024-10-06 23:37:55 发布
阅读量267 收藏
点赞数 2
文章标签： css html css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq449245884/article/details/141794291
版权

如何确保页脚始终位于页面底部? & 弹跳加载器

如何确保页脚始终位于页面底部?

防止页脚在页面上浮动对于创建精美的网站很重要。内容较少的页面可能会遇到这个问题,但使用几行 CSS 就可以轻松解决。假设你的 HTML 类似于下面的代码片段,这里有两种现代方法来确保页脚始终位于页面底部:

<body>
  <main><!-- 主要内容 --></main>
  <footer><!-- 页脚内容 --></footer>
</body>

使用 Flexbox

你可以使用 flexbox 来确保页脚始终位于页面底部。方法是给 body 元素设置 min-height: 100vh、display: flex 和 flex-direction: column。然后,给 footer 元素一个 margin-top: auto,使其边距填充它与前一个兄弟元素之间的剩余空间。注意,这个技巧不会拉伸前一个兄弟元素,而是将页脚推到页面底部。

@大迁世界
关注
30.如何确保页脚始终位于页面底部? & 弹跳加载器
粉丝们务必加入微信粉丝群
08-25 49
一般来说,grid 在大多数情况下更灵活,如果你有更复杂的布局,包括头部或侧边栏,它可以提供帮助。它是 CSS 能力的一个很好的例证,展示了如何仅用几行代码就可以创建引人注目的视觉效果。由于动画延迟,每个圆圈的弹跳都有稍微的偏移,创造出一种引人入胜的视觉节奏。例如,你可以改变圆圈的颜色、大小或弹跳高度,或者调整动画的持续时间和延迟以创造不同的节奏。确保页面在没有动画的情况下仍然可用,并为使用辅助技术的用户提供适当的反馈。这两种方法都不需要固定的高度值,因此它们可以适应不同的内容量和不同的屏幕尺寸。
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 4804
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
使用Famo.us创建高性能的移动UI
cuyi7076的博客
06-29 603
JavaScript开发人员社区热切欢迎Famo.us开源UI渲染框架于2014年Spring公开发布。 Famo.us承诺消除一些阻碍JavaScript和Web技术主导移动开发领域的最后瓶颈：缓慢的UI和糟糕的用户体验（UX）。 Famo.us以移动设备上的硬件图形处理单元（GPU）为目标，以实现尽可能最高的渲染帧速率，并且它添加了完善的物理引擎来实现令人满意的UX。 在为移动应用程序...
Roson的Qt之旅#109 QML ListView的成员属性介绍
Allen Roson
08-10 1175
ListView属性介绍；ListView函数说明，QML ListView使用说明
CSS笔记（CSS禅意花园+CSS揭秘）
Koweico的博客
09-17 798
关联css与html 通过id在head标签中一一设置 <style type=”text/css”> #id名字{ Color：red; } </style> 新建css文件，在head标签中关联 <link href="文件名.css" rel="stylesheet" type="text/css" /> Css文件中： #id名字{color:red;} 在每个标签内直接加入style=“color：red；……” 书写规则 选择器 {
分享996个实用的JavaScript特效你要的全在这里
猎人村庄的博客
05-29 4749
链接:https://pan.baidu.com/s/1eL8ASFY7BGiIrVXCtgPzgQ 密码:rbqo 我就不信没有你想要的。996个好看且实用的JavaScript特效，总有一款适合你，小弟在某付费网站上收集的，虽然不是我的原创但是小弟这996个Js也是花了很多时日！下面是JS的名字，我放了一些图片，所有图片全都放进去是不行的996个图太多，大家下载后可以看到。 css3聚光灯射线旋转动画特效 js圆形虚线指针时钟特效 HTML5 Canvas透明气泡动画特效 jedate选择一年范围.
前端框架和库汇总
韶光
04-21 3578
　　总是对前端的框架和库傻傻分不清，今天又研究了一番，看到一个图： 　　 　　我的理解就是框架包含了各种类，然后我的代码可以调用类，框架调用我的代码。类库更底端，它把算法写好，我需要实现一个功能，不需要再去实现算法，只需要调用这个方法，而这个功能是很单一的。框架一般是一个流程，框架里流程已经写好，我只需要调用它提供的接口，传入参数就可以实现这个方法，它是一个骨架，也就是它的功能并不单一。 　...
drupal6翻译
热门推荐
Tech My Life
09-07 6万+
# Chinese, Simplified translation of Drupal core (6.20) # Copyright (c) 2011 by the Chinese, Simplified translation team # msgid "" msgstr "" "Project-Id-Version: Drupal core (6.20)\n" "POT-Crea
如何确保页脚始终位于页面底部？
liuhao9999的博客
11-02 978
尝试创建精美的网站时，防止页脚在页面上浮动非常重要。内容较短的页面可能会遇到此问题，但只需几行 CSS 即可轻松修复。您可以使用弹性框来确保页脚始终位于页面底部。然后，给元素 a，使其边距填充它和它以前的同级之间的剩余空间。请注意，此技术不会拉伸前一个同级，而是将页脚推到页面底部。根据您的需求，一个可能比另一个更合适。一般来说，网格在大多数情况下更灵活，如果您有更复杂的布局（可能包括标题或侧边栏），网格会有所帮助。您也可以以非常类似的方式使用网格。在这种情况下，利用该单元来拉伸元素以填充剩余空间。
css让页脚始终在底部不论页面内容多少
09-25
在网页设计中，确保页脚始终位于页面底部是一个常见需求，无论页面内容多少，用户都能在滚动到页面底部时看到页脚。这不仅影响用户体验，也关系到页面布局的整洁性。CSS提供了多种方式来实现页脚始终固定在页面底部...
让footer始终位于页面的最底部不随滚动而滚动
09-25
在制作网页的过程中，让页脚（footer）始终位于页面底部是一个常见的需求。特别是在内容较多的页面中，当用户滚动浏览时，页脚仍能固定在浏览器窗口的底部，而不是随着页面内容一起滚动。这种布局效果不仅提升了用户...
让页脚紧贴页面底部的CSS代码
09-25
在网页设计中，保持页脚始终位于页面底部是一项常见的需求，尤其在内容量不固定时。"让页脚紧贴页面底部"的问题涉及到CSS布局和浏览器兼容性，尤其是在新的浏览器版本和不同设备尺寸下。传统的解决方案往往在某些...
CSS画出三角形的做法
mingangel的博客
10-01 427
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
CSS 盒子属性
m0_74012211的博客
10-02 479
CSS 盒子属性
CSS——文字打字机效果
最新发布
懒羊羊大王的博客
10-06 969
本文通过纯 CSS 实现文字的打字机效果，然后借助 JS 实现了扩展。基本思路：使用伪元素覆盖原文字，并且使用伪元素模拟闪烁的光标效果。
【CSS】position
小秀的博客
10-02 372
特点：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。特点：不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移。特点：元素脱离文档流 ，块级元素由内容撑开宽高，清除子集浮动。参考物：距离最近的使用了定位的父级，没有时找body。position: static 静态定位（默认）参考物：根据用户的滚动位置进行定位。参考物：元素的初始位置。
241006-Gradio中Chatbot通过CSS自适应调整高度
专注机器学习之路
10-06 140
【代码】241006-Gradio中Chatbot通过CSS自适应调整高度。
CSS 中的@media print 是干什么用的？
读心悦
09-29 268
在这个查询块内，你可以设置各种样式，以确保打印输出的内容看起来整洁、专业，并且只包含必要的信息。例如，你可能还想隐藏某些不重要的元素，如广告、侧边栏或仅用于装饰的图片，同时增加标题和段落的字体大小，以及为页面添加页眉和页脚（但这次是在打印样式中自定义的，与网页上的不同）。这种做法通常很有用，因为网页的页眉和页脚可能包含导航链接、社交媒体图标、版权声明等对于在线浏览很有用的信息，但在打印版本中，这些信息可能并不必要，甚至可能占用宝贵的页面空间。元素都将被隐藏（即不显示在打印的页面上）。这是通过将这些元素的。
将HTML页面页脚固定在页面底部(多种方法实现)
05-25
将页面内容和页脚包裹在一个容器中，使用 `display: grid` 和 `grid-template-rows: 1fr auto` 属性将容器分成两行，第一行占据剩余的空间，第二行为自适应高度，即可将页脚固定在页面底部。 ``` html, body { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@大迁世界

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值