1. 什么是绝对底部

最近在做一个小项目时,对底部Footer组件有如下需求:当页面内容少于浏览器窗口时,Footer固定在浏览器窗口底部不动;随着页面内容增多,超出浏览器窗口时,Footer紧跟在内容的最下方。后来了解到,这是一种名叫Sticky Footer(绝对底部)的方法。

内容在浏览器窗口之内,页脚固定在窗口底部:

内容超出浏览器窗口,页脚紧跟在内容最下方:

2. 实现绝对底部

话不多说,先上代码:

布局:

1
2
3
4
5
6
7
8
9
10
11
<div class="main">
<div class="box">我是页面内容</div>
<div class="box">我是页面内容</div>
<div class="box">我是页面内容</div>
<div class="box">我是页面内容</div>
<div class="box">我是页面内容</div>
<div class="box">我是页面内容</div>
<div class="box">我是页面内容</div>
<div class="box">我是页面内容</div>
</div>
<div class="footer">页脚</div>

样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body {
margin: 0;
padding: 0;
}
.main {
min-height: calc(100vh - 80px);
}
.box {
height: 100px;
background-color: rgb(16, 238, 238);
border: 6px solid #000;
}
.footer {
height: 80px;
background-color: rgb(243, 239, 13);
}

box当作页面的内容。

要注意footer需要在主页面main的外面,也就是兄弟关系。

footer需要给个固定高度,例如80px

main中设置最小高度:min-height: calc(100vh - 80px)即可。

通过calc()函数实时计算出main所需要的最小高度,vh代表相对于视口的高度,100vh就表示整个视口的高度。

用整个视口的高度减去footer的高度,就是main容器的最小高度。

如果页面内容少于视口,则main会保持这个高度,加上footer的高度,刚好填充满视口。

如果页面内容超出视口,则main容器高度会被撑大footer在最下方,也就达到了效果。

总结:

最重要的就是footer需要给固定高度,与footer兄弟关系main容器,需要设置最小高度!

3. 补充

了解一下CSS3中的calc()函数。

  • calc()函数用于动态计算长度值
  • 运算符前后都需要保留一个空格
  • 任何长度值都可以使用calc()函数进行计算
  • 支持+, -, *, /运算