极客拉钩算法突击训练营内置文档资料

download：极客拉钩算法突击训练营内置文档资料

用Flexbox和Grid使网页页脚坚持在页面的底部
假如你主要是处置SPA开发，你可能会困惑为什么这个问题依然存在，但它依然有可能找到你的页脚漂浮起来的缘由：

登录页面
博客/新闻文章（没有广告...)
流程的间歇性页面，如确认行动
产品列表页
日历事情的细节

有两种办法能够用现代CSS来处置：flexbox和grid。
这里是演示，默许为flexbox办法。假如你翻开完好的Codepen，你能够将$method 变量换成grid ，以查看该替代计划。
继续阅读演示，理解每种办法。
Flexbox办法#
这种办法是经过定义来完成的。
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}

footer {
margin-top: auto;
}

/ Optional /
main {
margin: 0 auto;
/ or: align-self: center /
max-width: 80ch;
}
复制代码
它是如何工作的#
首先，我们确保body 元素将至少拉伸到屏幕的全部高度，min-height: 100vh 。假如内容较短，这将不会触发溢出（例外：某些挪动阅读器），它将允许内容依据需求继续拉伸高度。
设置flex-direction: column ，能够在保存堆叠的块元素方面坚持正常文档流的行为（假定body 的直接子元素的确都是块元素）。
Flexbox的优势在于应用了margin: auto 的行为。这个怪异的技巧将招致边距填补它所设置的项目和它在相应方向上最近的兄弟姐妹之间的任何空间。设置margin-top: auto ，能够有效地将页脚推到屏幕的底部。
骗局#
在演示中，我在main 中添加了一个outline ，以证明在flexbox办法中，main 元素并没有填补高度。这就是为什么我们必需运用margin-top: auto 的技巧。这对你来说不可能有什么影响，但假如有的话，请看网格办法，它能够将main ，以填补可用空间。
网格办法#
这种办法是经过设置完成的:
body {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}

/ Optional /
main {
margin: 0 auto;
max-width: 80ch;
}
复制代码
它是如何工作的#
我们为这种办法保存了min-height: 100vh ，但我们随后运用了grid-template-rows ，以正确划分空间。
这种办法的怪招是运用特殊的网格单位fr 。fr 意义是 "分数"，运用它请求阅读器计算出可用的 "分数 "空间，以分配给该列或行。在这种状况下，它填补了页眉和页脚之间的一切可用空间，这也处理了flexbox办法的 "圈套"。
哪个更好？#
看到grid之后，你可能会有一霎时觉得它显然更胜一筹。但是，假如你在页眉和页脚之间添加更多的元素，你需求更新你的模板（或者确保总是有一个包装元素，如div ，以不影响任何嵌套语义/层次）。
另一方面，flexbox办法可用于中间局部有多个块状元素的各种模板--例如，一系列的

元素，而不是单一的

，用于存档页面。
因而，与一切技术一样，这取决于项目 :)但是，我们都能够同意，具有这些现代的CSS规划办法是很了不起的!