css让页脚保持在底部位置的四种方案


Posted in HTML / CSS onJuly 23, 2022

介绍

如果你正在创建一个网页,你可能经常会想让它的页脚一直保持在最底部,无论中间的内容有多少。那么,有什么方法能快速做到么?本期我们将介绍四种css方案来解决让页脚保持在底部位置这个问题。

css让页脚保持在底部位置的四种方案

正文

绝对定位

$ft-h:60px;
body {
  min-height: 100vh;
  position: relative;
  box-sizing: border-box;
  padding-bottom: $ft-h;
}
footer{
  height: $ft-h;
  width: 100%;
  position: absolute;
  bottom: 0;
  left:0;
}

关键点在于让 footer 绝对定位置于最底部,而 body 则需要通过 padding-bottom 给其空出一段在 footer 高度的距离,并且 body 的高度必须是最小 100vh 代表可以占满窗口高度,而且 body 还要 设置 box-sizing: border-box; 这样不会产生高度溢出的问题。

这个虽然方案有一丢丢麻烦,但是兼容性会好些因为,核心是paddingabsolute 这两个属性,这样很早到浏览器都可以支持到。

弹性盒子

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
section{
  flex: 1;
}

首先还是 body 使用 min-height,确保伸展到屏幕的全高。然后,设置 flex-direction: column 让其变成为堆叠的块元素并保持整个文档流可以正常显示。最后,我们只要让内容区域的变成 flex: 1 ,为了让内容区域自动填充慢整个区域。这样页脚自然而然的就到了最下面。

这个虽然方案有都比较喜欢使用,因为兼容性 flex 目前来说还是比较不错的,而且代码量也很少,相对于也比较灵活。

网格布局

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

对你没看错,用了网格后代码量更少了。首先依然是要让 body 撑满屏幕高度。紧接着,我们使用 grid-template-rows 来正确分隔内容。这个方法使用了小数单元计算可用空间并将其分配到多行。因此,它将填充页眉和页脚之间的所有可用空间。与上面的 弹性盒子 相似,也是让内容区域自动填充满整个区域高度,把页脚堆到最下面。

这个方案虽为简洁,但是吃亏在 grid 布局受很多手机低版本的浏览器限制,但是展望网格布局应该以后会是开发者最喜欢的方案。

calc计算

section{
  min-height: calc(100vh - 60px - 60px);
}

现在代码更少了,只需要一句话就能做到了。众所周知,calc() 此CSS函数是允许在声明 CSS 属性值时执行一些计算的方法。我们只要是让内容区域的最小高度,是全屏高度然后去掉 headerfooter 的高度,这就大功告成啦~

这个方案最简洁,但是有两个问题比较突出,就是以后如果在增加一些块和更改布局时会稍微麻烦一点都要预先知道块的高度,其次也是在手机低版本的兼容上,有时候也是不尽人意。

结语

其实与其说本期讲的是让页脚保证在底部,更不如说是css基础布局的实战练习,在我们开发中,各种状况都有可能出现,最后那种方案好与不好依然是要根据当前业务场景去灵活运用的。

 到此这篇关于css让页脚保持在底部位置的四种方案的文章就介绍到这了,更多相关css页脚保持在底部位置内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 HTML / CSS
html5 的a标签 Href 拨电话的写法
Nov 04 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 #HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 15 #HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 #HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 #HTML / CSS
使用HBuilder制作一个简单的HTML5网页
使用CSS定位HTML元素的实现方法
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 #HTML / CSS
You might like
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
javascript中的array数组使用技巧
2010/01/31 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
python学习 流程控制语句详解
2016/06/01 Python
Python实现单词翻译功能
2017/06/06 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
什么是.net
2015/08/03 面试题
电子信息专业学生自荐信
2013/11/09 职场文书
理货员的岗位职责
2013/11/23 职场文书
物业总经理岗位职责
2014/02/28 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
公司新员工欢迎词
2015/09/30 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python