您现在的位置是：网站首页> 编程资料编程资料
CSS Sticky Footer 几种实现方式
2021-09-03
776人已围观
简介 这篇文章主要介绍了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教程-网页制作-网页教学网
- CSS画心形的三种方法CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- 纯CSS流星雨背景的示例代码CSS 、JS实现浪漫流星雨动画
- css实现5种滚动吸顶实现方式的比较(性能升级版)Html5导航栏吸顶方案原理与对比实现Html5之title吸顶功能纯CSS解决H5布局中的吸顶吸底的实现步骤
- CSS Houdini实现动态波浪纹效果纯CSS实现波浪移动效果的示例纯css3制作鼠标悬停波浪形状弹性下拉菜单特效源码css3实现逼真的波浪起伏动画特效源码CSS3实现的波浪闪动文字动画特效源码纯css3实现的音阶波浪loading加载动画特效源码CSS3实现文字波浪线效果示例代码纯css3实现的文字波浪动画特效源码纯CSS3实现波浪形菜单效果源码纯CSS3实现3D波浪形动画有波浪起伏的效果
- 你可能需要这样的大屏数字滚动效果CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- uni-app项目瀑布流布局的实现css实现元素居中的N种方法div水平布局两边对齐的三种实现方法waterfall瀑布流布局+动态渲染的实现页面中有间隔的方格布局如何完美实现方法css实现六种自适应两栏布局方式使用flex布局轻松实现页面布局的示例代码使用Flex布局实现头部固定内容区域滚动的方法详解flex布局下图片变形的解决方法详解flex布局与position:absolute/fixed的冲突问题Flex布局实现div内部子元素垂直居中的示例
- flex-grow、flex-shrink、flex-basis和九宫格布局理解CSS实现页面九宫格布局的简单示范HTML九宫格布局实现方法HTML利用九宫格原理进行网页布局
- 使用css实现android系统的loading加载动画10种CSS3实现的loading动画，挑一个走吧？CSS3制作3D立方体loading特效CSS3实现渐变的loading加载进度条特效代码CSS loading效果之 吃豆人的实现CSS 实现各种 Loading 效果附带解析过程
- css中zoom:1属性的定义和作用详解CSS中zoom属性或overflow:auto属性清除浮动的作用CSS中的zoom属性和scale属性的用法及区别IE浏览器专有css属性之zoom详解CSS中不为人知Zoom属性的使用介绍(IE私有属性)
