css 实现紧贴底部的页脚

HTML代码

<body>
    <main>hello</main>
    <footer></footer>
</body>

在网站中,不管页面长度如何,我们都期望页脚应该紧贴底部。在页面够长时,显示没有问题,当页面较短时,页脚就会跑上去。

css 紧贴底部的页脚
一个直观的方法,就是可以用calc计算出main的最小高度:min-height:calc(100vh - footer的高度);,这样做的前提就是已知footer的高度,如果footer的高度也是有它其中的内容决定,这样就行不通了。关于calc()相关文章推荐阅读我之前的文章《CSS calc()的完整指南》《css3 calc()属性介绍以及自适应布局使用方法

解决这个问题依然可以用Flexbox。首先我们需要对body元素设置 display:flex,因为它是这两个主要区块的父元素,当父元素获得这个属性之后,就可以对其子元素触发“伸缩盒布局模型”。我们还需要设置flex-direction:column,把伸缩方向设为竖直方向。然后,给main的flex属性指定一个大于 0 的值(比如1)。

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main{
  flex: 1;
  background-color: antiquewhite;
  padding:30px;
}
footer{
  padding:50px;
  background-color: rgb(48, 46, 46);
}

这样,不管main和footer的内容多少,footer都会紧贴页面底部。

css 实现紧贴底部的页脚

注意

这个flex属性实际上是flex-growflex-shrinkflex-basis的简写语法。

任何元素只要设置了一个大于0的flex值,就将获得可伸缩的特性;

flex的值负责控制多个可伸缩元素之间的尺寸分配比例。

举例来说,在我们眼前的这个例子中,如果<main>flex:2<footer>flex:1,那么内容区块的高度将是页脚高度的两倍。

如果把它们的值从2和1改为4和2,结果也是一样的,因为真正起作用的是它们的数值比例。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » css 实现紧贴底部的页脚

发表评论

提供最优质的资源集合

立即查看 了解详情