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

Question

我试图得到一个基本的布局与内容和页脚与flex。

我需要的内容，以填补任何剩余的和页脚是60px高。做这件事最好的方法是什么？

<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！

I modified it to做你想做的事。

细目

body {
    margin: 0;
    padding: 0;
}

首先，我们从正文中删除边距和填充，因为允许.container填充整个视口。

.container {
    min-height: 100vh;
}

使.container至少与视口一样大，以便完全填充它。

.one {
    flex: 1;
}

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

正如Bram Vanroy所指出的，如果页脚具有设置的高度，则可以使用calc (以及其他方法)。但是，如果您没有显式地设置页脚高度，让页脚采用它所需的所有高度，然后伸展内容容器以适应该高度，这也是可行的。

Answer 2

你不需要伸缩。使用calc完成此操作。

.container {
    height: 100%;
}

.one {
    height: calc(100% - 60px);
}

.two {
    height: 60px;
    background: blue;
}

这是a fiddle。

正如Cu3PO42在评论中提到的，最小高度可能是更好的选择，以满足您的需求。

Answer 3

您可以使用以下命令来实现它

.container {
  height: 100%;           /* As tall as the containig block */
  display: flex;          /* Magic begins */
  flex-direction: column; /* Column layout */
}
.one { flex: 1; }         /* Grow to fill available space */
.two { height: 60px; }    /* 60px tall */

然而，有一个问题:为了使height: 100%工作，包含块需要一个明确的高度(否则，它将是一个循环定义)：

百分比是相对于生成的长方体的containing block的高度计算的。如果包含块的高度未显式指定(即，它取决于内容高度)，并且此元素没有绝对定位，则该值计算为“auto”。

所以你还需要

html, body {
  height: 100%;
  margin: 0;
}

​

html, body {
  height: 100%;
  margin: 0;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.one {
  flex: 1;
  background: red;
}
.two {
  height: 60px;
  background: blue;
}

<div class="container">
  <div class="one"></div>
  <div class="two"></div>
</div>

​