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 实现紧贴底部的页脚