击穿

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！
我modified it完全按照你的意愿行事。

击穿

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。如果含有的高度未明确指定块（即，它取决于内容高度），这个元素并不是绝对定位的值计算到＆＃39; auto＆＃39;。

所以你还需要

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

如果您不想关注calc()，vh或许多height: 100%，您可以使用固定定位：

.one, .two {
  position: fixed;
  left: 0;
  right: 0;
}
.one {
  top: 0;
  bottom: 60px;
  background: red;
}
.two {
  height: 60px;
  bottom: 0;
  background: blue;
}

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

它具有在旧版浏览器上运行的优势。

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

4 个答案:

击穿