css - 基本 Flex 布局 - 页脚/内容？

Question

我正在尝试获得包含内容的基本布局和带有 flex 的页脚。

我需要内容来填充剩余的内容，并且页脚的高度为 60 像素。解决此问题的最佳方法是什么？

<div class="container"> // 100% height
  <div class="one"></div> // Fill rest of height
  <div class="two"></div> // 60px tall
</div>

这是一个基本的 jdfiddle:http://jsfiddle.net/vkd4v6Lt/1/

Answer 1

感谢您提供基础 JSFiddle!
我 modified it做你想做的事。

分割

body {
    margin: 0;
    padding: 0;
}

首先我们从主体中移除边距和填充，因为允许 .container 填充整个视口(viewport)。

.container {
    min-height: 100vh;
}

使 .container 至少与视口(viewport)一样大以完全填充它。

.one {
    flex: 1;
}

用这个元素填充 flexbox 的剩余空间，因为 .two 的高度设置为 60px。

正如 Bram Vanroy 所指出的，如果页脚具有设置的高度，您可以使用 calc(以及其他方法)。但是，如果您没有明确设置页脚高度并让页脚占据它需要的所有高度，然后拉伸(stretch)内容容器以适应它，这也适用。