vue 页脚_前端必懂之Sticky Footer(粘性页脚)
写在最前:Sticky Footer是css的一种布局场景。页脚footer永远固定在页面的底部,页面内容不够长的时候页脚黏在视窗底部,内容足够长时会被向下移动。老式门户网站由于内容过短常常版权页脚前移,移动端特定布局也需要Sticky Footer来解决这些问题。
一、利用绝对定位和padding完美兼容
去除标签多余的margin,padding,给html和body设置100%
外部容器min-height为100%,使得内容少时也能撑开
主体内容设置padding-bottom,这个为底部的高度,可以使内容完全显示否则会使主体内容有底部面积大小区域被遮挡
footer高度固定,进行绝对定位
DOM节点
样式代码
html,
body {
height: 100%;
}
.container {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%; /*IE6不识别min-height*/
}
.section {
padding-bottom: 60px;
}
.footer {
position: absolute;
width: 100%;
height: 60px;
bottom: 0px;
}
二、利用padding-bottom和margin-top完美兼容
已知底部高度,利用padding-bottom和margin-top完美兼容
https://codepen.io/qietuniu/pen/dLqpdR
去除标签多余的margin,padding,给html和body设置100%;
外部容器min-height为100%,使得内容少时也能撑开
主体内容设置padding-bottom,这个为底部的高度
footer高度固定,margin-top的值为高度负值,footer与container同级。
DOM节点
样式代码
html,
body {
height: 100%;
}
.container {
min-height: 100%;
height: auto !important;
height: 100%; /*IE6不识别min-height*/
}
.section {
padding-bottom: 60px;
}
.footer {
position: relative;
margin-top: -60px;
width: 100%;
height: 60px;
}
三、新增块级元素填补页脚遮挡
去除标签多余的margin,padding,给html和body设置100%;
外部容器min-height为100%,使得内容少时也能撑开
主体内容设置margin-bottom,值为底部的高度的负值
footer位置在与container同级,section同级新增块元素.底部和新增块元素高度一致
DOM节点
样式代码
html,
body {
height: 100%;
}
.container {
min-height: 100%;
height: auto !important;
height: 100%; /*IE6不识别min-height*/
margin-bottom: -60px;
}
.placeholder,
.footer {
height: 60px;
}
四、用表格属性实现完美兼容
去除标签多余的margin,padding,给html和body设置100%
外部容器min-height为100%;使得内容少时也能撑开,display属性设置为table
主体内容display属性设置为table-row,高度设置为100%
DOM节点
样式代码
html,
body {
height: 100%;
}
.container {
display: table;
width: 100%;
min-height: 100%;
}
.section {
display: table-row;
height: 100%;
}
五、calc计算
vh存在兼容有限,一般在移动端使用。100vh可代替body和html的100%来拿到视口高度实现效果
https://codepen.io/qietuniu/pen/NmLRmV
外部容器使用calc计算,100vh减去底部高度
footer位置与container同级,高度固定
主体内容display属性设置为table-row,高度设置为100%
DOM节点
样式代码
.container {
min-height: calc(100vh - 60px);
}
.footer {
height: 60px;
}
六、flex弹性布局
外部容器display设为flex弹性布局,flex-flow设置方向为column纵向并设置最小高度为100vh
主体内容flex属性设为1
DOM节点
样式代码
.container {
display: flex;
flex-flow: column;
min-height: 100vh;
}
.section {
flex: 1
}
七、Grid网格布局
外部容器display设为grid网格布局,grid-template-rows设置一个网格的行,fr单位可以帮助我们创建一个弹列的网格轨道,它代表了网格容器中可用的空间(就像Flexbox中无单位的值)
header头部的位置放在主体内容内部
footer中grid-row-start和grid-row-end属性设置单元格开始和结束的行线
DOM节点
样式代码
.container {
min-height: 100vh;
display: grid;
grid-template-rows: 1fr auto;
}
.footer {
grid-row-start: 2;
grid-row-end: 3;
}
结语
以上方法各有优劣,根据使用场景选择合适的方案
场景
方案
兼容性要求高
①②③
底部不固定高度
④⑥⑤⑦
PC端建议
①②
移动端建议
①②⑥
尊重原创,如需转载请注明出处!
作者:切图妞
vue 页脚_前端必懂之Sticky Footer(粘性页脚)相关推荐
- VUE路由守卫_前端实现权限验证
VUE路由守卫_权限验证 引言: 本文在利用SpringBoot和Vue实现前后端分离一文的基础上追加的路由守卫:未登录时会限制访问某些页面(前台控制),与之前的Shiro不同: 文章目录 VUE路由 ...
- vue动画效果配置和弹层css sticky footer
vue动画效果配置 有两种方式: 一种是css方式 需要注意 4 个(CSS)类名在 enter/leave 的过渡中切换: v-enter: 定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移 ...
- vue移动端用什么数据可视化插件_前端必看的数据可视化入门指南
作者:董晓庆 蚂蚁金服体验技术部 这是一篇给大家提供数据可视化开发的入门指南,介绍了可视化要解决的问题和可以直接使用的工具,我将从下面几个方面给大家介绍,同时以阿里/蚂蚁的可视化团队和资源举例说明: ...
- vue验证整数_前端Vue中常用rules校验规则
前端Vue中常用rules校验规则 1.是否合法IP地址 export function validateIP(rule, value,callback) {if(value==''||value== ...
- vue computed使用_前端发展方向指南—Vue运行机制
点击上方蓝色字关注我们~01前言随着这几年前端的快速发展,页面中需要实现的功能越来越复杂,DOM操作频繁,使用传统的jQuery库去频繁操作DOM时不仅消耗性能,而且各种DOM绑定后期维护时简直是一场 ...
- axios vue 回调函数_前端Vue 面试题大全
点蓝色字关注"程序员报刊" 「 学习 新闻 招聘 」 vue的底层原理? vue组件之间的通信? JS中判断数据类型的方法有几种? 最常见的判断方法:typeof 判断已知对象类 ...
- 【设计模式】前端必懂EventEmitter
本文说一下 EventEmitter,比较简单,可以直接看代码. 发布 + 订阅 DOM 的事件机制就是发布订阅模式最常见的实现,这大概是前端最常用的编程模型了,监听某事件,当该事件发生时,监听该事件 ...
- vue 初始化方法_前端发展方向指南—Vue源码初始化
Vue 的源码结构比较绕,同时使用了大量的面向对象的高级技巧.重写方法,扩展方法,多态等应用.从 Vue 实例的加载过程就可以看出来,这一节重点看看 Vue 的源码加载流程是什么. 前言 vue已是目 ...
- vue接收索引_前端开发:Vue中findIndex() 方法的使用
前端开发过程中对数据的遍历是非常常见的操作,在Vue.js中通过对数组下标遍历操作来进行相关逻辑处理的方法常用的有两种:some()和findIndex() ,二者都是通过遍历数组里面的id值来进行操 ...
- iframe vue 前进 后退_前端面试准备笔记系列之vue(01)
目录 01. 对于MVVM的理解? 02. 概述Vue以及优缺点? 03. vue等单页面应用及其优缺点 04. Vue实现数据双向绑定的原理 05. vue.js的两个核心是什么? 06. css如 ...
最新文章
- 企业高管眼中的 SAP 和「智慧企业」| 品读中国企业数字化转型的故事
- 比OCR更强大的PPT图片一键转文档重建技术
- python polar函数_Python可视化很简单,可是你会吗?python绘制饼图、极线图和气泡图,让我来教教你吧,一文教会!!!...
- python重载模块_Python 3.0中重载模块
- [Unity] GameFramework 学习记录 5
- 15.【nuxt起步】-Nuxt使用jsweixin sdk
- hdu 5094 Maze bfs
- Java EE设计思想
- rk3128平台Android7.1调试USB接口wifi总结
- 创建FTP和Web虚拟目录的方法!
- OpenCV入门教程,超详细OpenCV入门教程!10小时让你轻松掌握opencv的使用
- Android apk签名详解——AS签名、获取签名信息、系统签名、命令行签名
- python数字转换成中文大写_Python将阿拉伯数字转化为中文大写
- 秀米图文排版UEditor插件示例
- go chan 类型用法
- mediawiki java_MediaWiki
- 为什么你还没有买新能源汽车? 1
- HTTP,TCP,UDP常见端口对照表大全
- java推算日期后天_分别用C++和Java写的计算后天的日期code
- QQ传输文件原理参考(来自互联网)
热门文章
- pyTest官方手册(Release 4.2)之蹩脚翻译(9)
- CSS 单(多)行文本超过部分显示省略号,解决数字或英文不换行问题
- 《MultiPoseNet: Fast Multi-Person Pose Estimation using Pose Residual Network》论文阅读
- 关于按钮“按下”效果的两种实现
- 单片机学习笔记————51单片机实现两片联级74HC595驱动16个LED灯(把74HC595驱动程序翻译成类似单片机IO口直接驱动的方式)
- kali linux软件源更新,系统美化
- 苹果youtube无法连接网络_当手机无信号或者无法连接网络时的正确解决步骤
- 新南威尔士 计算机硕士,澳洲新南威尔士大学计算机专业硕士课程介绍
- Spring学习笔记-C7-SpringMVC高级技术
- Java实现多文件生成压缩包下载