准备深入学习一下前端并计划每周至少写一篇关于前端的文章。这是第四篇啦。
相必你已经猜到了，这里说的现代布局，是指 Flex 和 Grid 布局。
先看我们要的布局效果：
我们希望即使 Header+Body+Footer 总高度不足一屏，Footer 仍然会在页面的最底部。
对于两种布局，我们假设 HTML 结构是一样的：
<heder>
<h1>Header</h1>
</heder>
<main>
<p>Body</p>
</main>
<footer>
<p>Footer</p>
</footer>
方式一：Flex 布局
因为即使整体高度不够满屏也要 Footer 在页面底部，所以首先要做的，是设定整个页面的最小高度为一屏幕高(这样 Footer 才有机会下沉)：
body {
min-height: 100vh;
}
考虑到 header、body、footer 是上下排列的，所以 flex 相关设定如下：
body {
display: flex;
flex-direction: column;
}
而要把 footer 弄到底部，仅仅还需要一行设置：
footer {
margin-top: auto;
}
在 Flex 布局中，margin: auto 会把元素往既定方向一直推，直到没有空间可推为止。而 margin-top: auto 就是把元素一直往下推，这样的效果就是，Footer 落到了页面的最底部。
方式二：Grid 布局
刚开始和上面一样，要设置页面的最小高度：
body {
min-height: 100vh;
}
header、body、footer 对应着 3行，所以 grid 布局如下：
body {
display: grid;
grid-template-rows: auto 1fr auto;
}
第二行 1fr 的设定很关键，它是指占据所有剩余空间(除去第一、三行后的空间)。
搞定！
最后要注意的是，两者的布局结果类似，但实际上有些许差异：在上面 flex 布局中，main 元素的高度是其实际内容高度，而在 grid 布局中， main 元素的高度包括所有剩余空间。可以通过审核元素感受一翻。
点击【阅读原文】可查看两种布局效果。
– END –
原文始发于微信公众号（背井）：前端学习(4): 让 Footer 保持在页面底部的2种现代布局方式
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/246777.html
