码云 css 实现紧贴底部的页脚
HTML 代码
<body>
<main>hello</main>
<footer></footer>
</body>
在网站中，不管页面长度如何，我们都期望页脚应该紧贴底部。在页面够长时，显示没有问题，当页面较短时，页脚就会跑上去。
一个直观的方法，就是可以用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 都会紧贴页面底部。
注意
这个 flex 属性实际上是flex-grow、flex-shrink和flex-basis的简写语法。
任何元素只要设置了一个大于 0 的flex值，就将获得可伸缩的特性；
flex 的值负责控制多个可伸缩元素之间的尺寸分配比例。
举例来说，在我们眼前的这个例子中，如果<main>是flex：2而<footer>是flex：1，那么内容区块的高度将是页脚高度的两倍。
如果把它们的值从 2 和 1 改为 4 和 2，结果也是一样的，因为真正起作用的是它们的数值比例。
以上关于css 实现紧贴底部的页脚的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » css 实现紧贴底部的页脚
