Flexbox：使用flex-direction: row拉伸元素的高度

Question

我希望能够将两个div元素(.sideline和.main-contents)拉伸到页面底部，并与页脚保持一定的高度。

这两个div嵌套在一个

中(.row-elements)，并设置了flex-direction: row，因为我想让它们在同一行上。

/* body {
      display:flex;
      flex-direction:column;
    } */

.one-above-all {
  display: flex;
  flex-direction: column;
  /*   flex: 1 0 auto; */
  /*   min-height: 1100px; */
  border: solid black 1px;
}
.top-block {
  margin: 0 auto;
  border: solid black 1px;
  width: 300px;
  height: 30px;
  margin-top: -15px;
}
.headline {
  border: solid black 1px;
  width: 90%;
  align-self: flex-end;
  margin-top: 40px;
  margin-right: 10px;
  height: 160px;
  display: flex;
  box-sizing: border-box;
}
.row-elements {
  display: flex;
  flex-direction: row;
  margin-top: 40px;
  align-items: stretch;
  /*   min-height: 900px;
         flex: 1 0 auto;
       */
}
.sideline {
  width: 160px;
  border: solid 1px;
  margin-left: calc(10% - 10px);
  box-sizing: border-box;
  flex-shrink: 1
}
.main-contents {
  border: solid 1px;
  margin-left: 40px;
  /*   align-self: stretch; */
  flex: 1 1 auto;
  margin-right: 10px;
  box-sizing: border-box;
}
.bottom-block {
  align-self: flex-end;
  margin-top: auto;
  border: black solid 1px;
  margin: auto;
  width: 300px;
  height: 30px;
  margin-bottom: -10px;
  /*   margin-top: 880px; */
}
/* .stretch-test {
      border:solid, 1px;
      display: flex;
      flex-direction: column;
      
      flex: 1 0 auto;
    } */

<div class="one-above-all">
  <div class="top-block"></div>
  <div class="headline"></div>
  <!-- <div class="stretch-test"> -->
  <div class="row-elements">
    <div class="sideline"></div>
    <div class="main-contents">jhjkdhfjksdhafjksdahfl</div>
    <!--</div> -->
  </div>
</div>
<div class="bottom-block">footer</div>

Codepen

在css中注释掉的代码是我尝试过的方法。

我试过把 body 设置为弹性盒，并给 row-elements 类添加 flex:1 0 auto 属性，但没有成功。

我还试过嵌套 row-elements 类（其具有 flex-direction 属性为 row），放在另一个具有 flex-direction 属性为 column 的 div 中，并将 .row-elements 设置为 flex:1 0 auto，但也没有成功。

我尝试完全删除 row-elements 类，但两个 div 无法在同一行显示。

欢迎提供任何解决方案。

- snow

Answer 1

有两种方法可以将页脚固定在底部：

方法一：justify-content: space-between

使用 flex-direction: column 将容器垂直对齐。然后使用 justify-content: space-between 将最后一个元素固定在底部。

修改版 CodePen

方法二：auto 边距

同样地，在列方向上排列容器，给页脚应用 margin-top: auto，这将使页脚与其他 flex 项目分隔开来。 （看起来您已经熟悉这种方法。）

这里有两种方法的详细说明：Flex 项目对齐的方法

请确保为容器定义一个高度，除非您只想要内容高度。在我的示例中，我在 body 上使用了 height: 100vh。

- Michael Benjamin

---

运行良好。我添加了 flex: 1 0 auto;，这也将 .one-above-all 容器拉伸到底部。谢谢。 - snow

最初，我想知道是否有一种方法可以像这里的http://codepen.io/binarytrance/pen/xOorWp中的`.one-above-all`（带有红色边框）一样拉伸名为`.sideline`和`main-contents`的两个div（我仍然想知道它是否可以完成），但是您的修改也可以。 - snow

是的。删除 .stretch-test 容器。然后只需给 .row-elements 添加 flex: 1。http://codepen.io/anon/pen/ZOdwRK - Michael Benjamin

啊，太完美了。我之前不知道vh是什么。每天都有新的学习。 :) - snow