粘性页脚

点击下边的按钮来隐藏这个页面的内容，注意在页面内容无法填充整个页面时，页脚是如何粘在窗口底部的。

当页面内容稀少时，让页脚粘在页面底部，是每一个 Web 开发者在他的生涯中尝试解决过的问题。并且，可以说绝大多数情况，这是一个已被解决的问题。然而现存的解决方案有一个重大的缺陷 — 如果高度未知，就会失效。

Flexbox 布局可以完美解决这类问题。众所周知， Flexbox 布局经常被用在水平布局中，然而在垂直布局中 Flexbox 布局也格外拿手。你所要做的就是把垂直部分包在 flex 容器中，并选择一个元素可以让它展开以高度自适应。它们会自动地利用容器所有可用空间。

下边的示例中，容器被设置成窗口的高度，内容被设置成按需要扩展。(注意：在垂直布局中你需要指定容器的高度，这一点和水平布局的自适应不同。)

HTML 代码

<body class="Site">
    <header>…</header>
    <main class="Site-content">…</main>
    <footer>…</footer>
</body>

.Site {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.Site-content {
    flex: 1;
}

在 Github 中查看这个 demo 中完整的粘性页脚组件源代码