前言
粘连布局（sticky footer）也是常用的经典布局之一。本文介绍了什么是粘连布局以及使用 margin、flex、grid 实现粘连布局。
什么是粘连布局
当网页内容区域过短时就会出现 footer 下面一大片空白的情况，这一般不是我们想要的，我们希望 footer 此时紧贴在网页的底部。这时就可以使用粘连布局。
粘连布局（sticky footer）：
- 当内容区域元素没有超出视口高度时，
footer紧贴在网页底部（视口底部）。 - 当内容区域元素超出视口高度时，
footer紧跟内容区域底部，即正常布局。
实现
HTML 代码如下：
<div class="main">
<div class="content">content</div>
</div>
<div class="footer">footer</div>
- 要将
body的内外边距设置为0，否则网页会大一圈。 body设置最小高度为 100% 并使高度继承下去。- 基本思路为将剩余的空白区域进行填充。
* {
margin: 0;
padding: 0;
}
html,
body
{
height: 100%;
}
body {
min-height: 100%;
}
负 margin-bottom
此方法需要在 main 盒子下增加 push 盒子来填充空出的位置。
<div class="push"></div>
- 设置
main最小高度为 100%，使其在有空白时铺满视口。 - 设置
main的margin-bottom为负值，空出footer的位置。 push与footer等高，填补main内容超出 100% 时会与footer重合的空间。footer必须为固定宽高。- 需要添加额外的元素
push。
.main {
min-height: 100%;
margin-bottom: -50px;
}
.push,
.footer {
height: 50px;
}
负 margin-top
此方法需要在 main 盒子内加一层 inner 盒子，与上一方法类似，都是用盒模型空出 footer 的位置。
<div class="main">
<div class="inner">
<div class="content">content</div>
</div>
</div>
- 设置
main最小高度为 100%，使其在有空白时铺满视口。 - 设置
inner的padding-bottom为负值，空出footer的位置。 footer必须为固定宽高。- 需要添加额外的元素
inner。
.main {
min-height: 100%;
}
.inner {
padding-bottom: 50px;
}
.footer {
margin-top: -50px;
height: 50px;
}
计算属性
- 使用计算属性直接设置
main盒子高度，空出footer位置。
.main {
min-height: calc(100vh - 50px);
}
.footer {
height: 50px;
}
使用视口高度单位
vh，就不需要将body设置高度为 100% 了。
flex 实现
- 设置
flex: 1;使其自动填充剩余空间，footer会被压在最底下。 - 高度超出 100% 后就无空间可分配，
footer也就贴在main后了。 - 布局方式更加现代，更符合直觉。
body {
display: flex;
flex-direction: column;
}
.main {
flex: 1;
}
grid 实现
- 类似 flex 实现，让
main自适应剩下区域。 - 布局方式更加现代，更符合直觉。
body {
display: grid;
grid-template-rows: 1fr auto;
}
