CSS 实现绝对底部，页脚始终在最下方

1. 什么是绝对底部

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

内容在浏览器窗口之内，页脚固定在窗口底部：

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

2. 实现绝对底部

话不多说，先上代码：

布局：

<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>

样式：

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()函数进行计算
• 支持+, -, *, /运算

---

欢迎在我的博客上访问：
https://lzxjack.top/