使用 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!