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

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

1
2
3
4
5
6
7
8

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

.footer {
height: 100px;
}

发现需要计算高度,容易闪屏,最后换了flex方案,flex方案更简单了。

1
2
3
4
5
6
7
8
9
<body>
<nav> 导航栏 </nav>

<div id="app">
内容
</div>

<footer>底栏</footer>
</body>
1
2
3
4
5
6
7
8
9
10
11

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


div#app {
flex:1;
}
  • flex-flow:column 使元素纵向排列
  • min-height:100vh 使得内容部分高度不够时,body至少还有一个视窗的高度。

然后我们设置内容部分的css样式,flex:1

参考: