使用 flexbox 布局网页页脚，无论中间的内容部分是否会超出浏览器高度，该页脚始终粘贴在页面的底部。
在开发网页布局时，你可能遇到过这个问题：
当页脚静态放置在主体的末尾时，会发生这种明显断开的布局，但该页面没有太多内容。没有什么可以将页脚向下推，这就导致了它停留在屏幕中间，在其下面留下大量空白区域。
为了防止上述情况发生，我们可以使用 flexbox 构建页面。对于那些不熟悉 Flexbox 模型及其属性的人，你可以在本站中搜索到关于 Flexbox 布局的教程。
下面我们就来简单的做个演示。
<body>
<header>...</header>
<section class="main-content">...</section>
<footer>...</footer>
</body>要启用 flex 模型，我们需要添加 display:flex; 到 body 中，并将方向更改为 column （默认为row，这是一个水平布局）。 而且 html 和 body 将需要 100% 的高度才能填满整个屏幕。
html{
height: 100%;
}
body{
display: flex;
flex-direction: column;
height: 100%;
}现在我们需要使用 flex 来调整每个部分占用多少空间。
- flex-grow – 定义弹性盒子项（flex item）的拉伸因子。
- flex-shrink – 指定 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
- flex-basis – 指定 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。
我们将页眉和页脚分配他们需要的空间，并且为主内容部分保留其他所有空间。
header{
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}
.main-content{
/* 通过将flex-grow设置为1，.main-content 将会占用页面上的所有剩余空间（其他元素设置 flex-grow:0 并且不会争用可用空间）。 */
/* 1 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 1 0 auto;
}
footer{
/* 就像页眉一样，页脚会有一个静态高度 - 它不应该设置 grow or shrink. */
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}下面我们来看一下实际效果。
bingo!
2021-06-06
