做过网页开发的大佬都晓得:页面BFC渲染模式,块级元素会从上到下排列。假如页面有Header,Main,Footer三部分组成,Header和Footer高度固定,Main高度未知,当Main为空时,Footer和Header就会挨着。而我们最终要实现的效果是:Footer区域一直处于页面底部,即便Main为空,高度不足,Footer也要处于底部。main高度高的时候,Footer自动下移。
【新主题彩蛋】Css 布局实现“Sticky Footer”(Footer一直在底部)-Qui-Note
针对这个问题,JS动态计算有点大材小用。实现这样的效果,七娃推荐以下CSS方法:
html布局:

<body>
<header></header>
<main></main>
<footer></footer>
</body>

1.flex弹性布局实现

css方案:

body{display: flex; flex-flow: column; min-height: 100vh}
main{flex:1}

Flex弹性布局 是非常适合实现这种效果的,很多前端只会Flexbox 水平方向布局,但别忘了它也能实现垂直布局,思路很重要啊!

2.Css的计算属性calc

通过计算main的最小高度将header和footer减去,这样main就不会出现高度不足的情况了。
css方案:

header{height:80px}
main{min-height:calc(100vh - 200px);}
footer{height:120px}

3.相对定位实现absolute

css方案:

body{height:100%;position: relative;padding-bottom:120px}
footer{ position: absolute;bottom: 0;height: 120px;}

这种是将footer一直定位在main上层,然后body又将footer的高度填充上去,这样不会遮挡main里面的内容。也是不错的解决办法。

写在最后

你可能会说是不是还有其他办法,当然,布局不一样,方法也不一样,例如:表格,js实现,都能解决这样的需求。还有一直被雪藏的grid布局,都是可以实现的。思路和知识决定了多少办法。