您现在的位置是：网站首页> 编程资料编程资料

CSS Sticky Footer 几种实现方式

2023-10-19 231人已围观

简介这篇文章主要介绍了CSS Sticky Footer 几种实现方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

什么是 “Sticky Footer”

所谓 “Sticky Footer”，并不是什么新的前端概念和技术，它指的就是一种网页效果：如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固定在页面的最底部。但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。

先来看看下面的例子, 代码如下

 顶部 
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
底部

 .header { background-color: #3498DB; height: 50px; line-height: 50px; text-align: center; color: #fff; } .main { overflow: auto; box-sizing: border-box; } .footer { background-color: #ECF0F1; height: 50px; line-height: 50px; text-align: center; }

细心读者应该发现问题了,底部 footer 位置会随着主体内容高度变化自动变化,当主体内容小于视口的高度时, footer 并没有黏贴在底部. 那么解决这样问题尼?

negative margin

中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
中间部分
底部

 html, body { height: 100%; } .header{ background-color: #3498DB; height: 50px; line-height: 50px; text-align: center; color: #fff; position: fixed; width: 100%; } .main { min-height: 100%; overflow: auto; box-sizing: border-box; padding-bottom: 50px; padding-top: 50px; margin-bottom: -50px; } .footer { background-color: #ECF0F1; height: 50px; line-height: 50px; text-align: center; }

固定高度解决方案

使用如下属性

min-height
calc
vh

calc() 是 CSS3引入的,让你在声明CSS属性值时可以执行一些计算.

它可以用在一些数值场合; 详细可以查阅这里MDN

vh(Viewport Height): 顾明思议,表示的是视口的高度.

详细信息以及兼容可以查阅这里: caniuse

针对上面的代码进行修改,如下

 .main { min-height: calc(100vh - 50px - 50px); }

这样完成我们期望的,但是有个缺点就是每次我们都要去计算 header、footer 的高度.

这显然不完美, 假如DOM结构层级多的话,需要计算的内容更多.

absolute

absolute相信大家熟悉不过了,这里就不在

上一篇：css等高布局常用几种方式css多种方式实现等高布局的示例代码css设置多列等高布局的方法示例前端应该掌握的CSS实现多列等高布局技巧利用CSS3的flexbox实现水平垂直居中与三列等高布局浅析CSS等高布局的6种方式用CSS实现三列DIV等高布局以传达更好的视觉效果CSS 三栏等高布局实现方法CSS实例:三列等高布局-CSS教程-网页制作-网页教学网

下一篇：CSS3中媒体查询结合rem布局适配手机屏幕纯js和CSS3媒体查询制作简单的响应式导航菜单特效源码详解CSS3 Media Queries中媒体属性的使用 CSS3媒体查询Media Queries基础学习教程使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法CSS3媒体查询(Media Queries)介绍css3 响应式媒体查询的示例代码

您现在的位置是：网站首页> 编程资料编程资料

CSS Sticky Footer 几种实现方式

相关内容

点击排行

本栏推荐

猜你喜欢