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 相关文章推荐
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
html5 兼容IE6结构的实现代码
May 14 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
Apr 24 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
H5 meta小结(前端必看篇)
Aug 24 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 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
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
php数据库密码的找回的步骤
2011/01/12 PHP
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
js 数据类型转换总结笔记
2011/01/17 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
python实现哈希表
2014/02/07 Python
python中字典dict常用操作方法实例总结
2015/04/04 Python
Python实用日期时间处理方法汇总
2015/05/09 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
python zip()函数使用方法解析
2019/10/31 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
手机促销活动方案
2014/02/05 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
2014年班组工作总结
2014/11/20 职场文书
2016党员党课心得体会
2016/01/07 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android