转载

使用 flexbox 布局不受内容高低影响的粘性页面底部

使用 flexbox 布局网页页脚，无论中间的内容部分是否会超出浏览器高度，该页脚始终粘贴在页面的底部。

下载演示

在开发网页布局时，你可能遇到过这个问题：

使用 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;
}

下面我们来看一下实际效果。

使用 flexbox 布局不受内容高低影响的粘性页面底部