最近在改页面,需要做一个footer停留在页面底部的效果,原因是页面内容太少,高度不够,footer停留在页面中间,比较丑。需要使footer停留在页面底部,内容部分自适应。

需要设置footer高度,然后内容部分计算得出高度。只需要如下css:

1
2
3
4
5
6
7
8

#app {
min-height: calc(100vh - 100px);
}

.footer {
height: 100px;
}

参考:
Sticky Footer,完美的绝对底部