html页脚紧贴页面底部,css 实现紧贴底部的页脚

HTML代码

hello

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

一个直观的方法，就是可以用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的值负责控制多个可伸缩元素之间的尺寸分配比例。

举例来说，在我们眼前的这个例子中，如果是flex：2而是flex：1，那么内容区块的高度将是页脚高度的两倍。

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