4行CSS实现footer置底！超常见的需求！

理想的footer置底

footer置底，是一个常见的产品诉求。

如果要追求极致用户体验，我认为footer行为是这样的：

1. 如果网页内容比较多，超过一个屏幕能展示的范围（即有竖向滚动条），footer应该放到最下面，并且跟主体内容有一个小小的固定的距离。
2. 如果网页内容比较少，不够一个屏幕，footer应该放在屏幕最下面，保证不出现滚动条即可。此时footer跟主体内容会有更大的距离。

具体实现

先看最终效果：http://code.wubin.work/code/css/foot-on-bottom.html

或者 https://code.juejin.cn/pen/7117592687284322318

第一步，容器设置min-height

我们给容器（body，在你项目中，容器也可能是id="root"的div）设置min-height = '100vh'，就能保证：内容不够一个屏幕时，高度也要撑开到一个屏幕。如果内容超过一个屏幕时，min-height就失效了。

max-width和min-width优先级比width高！而min-width比max-width优先级更高！指的是，当max-width和width发生矛盾时，即width>max-width了，那么会以max-width为准。如果没有发生矛盾，那么就以width为准。height也是同理。

第二步，元素置底

现在，高度问题解决了，我们只要把footer元素放在body容器底部即可。

具体方法：

• 给容器设置flex布局，并且是column方向的；
• 给要置底的元素设置margin-top: auto。

核心代码

<div class="root">
  <main>我是主体</main>
  <footer class="footer">我是脚</footer>
</div>

假设容器的class是"root"，置底的元素的class是"footer"：

.root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.footer {
  margin-top: auto;
}

如果你还需要最小的间距，该怎么实现呢？

只需要给.footer设置padding-top即可！