用CSS实现页脚保持在网页底部怎样做?

Admin 2022-11-29 群英技术资�

在这篇文章中我们来了解一下“用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实现页脚保持在网页底部怎样做?内容,欢迎关注群英网络,小编将为大家输出更多高质量的实用文章�

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部