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

Question

我想拉伸两个div元素（.sideline和.main-contents）到达页面底部并保持距页脚一定的高度。

这两个div嵌套在div（.row-elements）内，flex-direction: row，因为我希望它们位于同一行。

＆＃13;

＆＃13;

/* 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;
    } */

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Codepen

css中注释掉的代码就是我尝试过的东西。

我尝试将body设置为flex，并将flex的行元素类1 0 auto属性设置为无效。

我尝试将row-elements类（flex-direction row}嵌套在flex-direction column并设置{{1}的另一个div中{}} .row-elements也没有用。

我尝试完全删除了row-elements类，但是两个div不会出现在同一行。

任何解决方案都将受到赞赏。

Answer 1

要将页脚粘贴到底部，可以使用以下两种方法：

方法＃1：justify-content: space-between

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

revised codepen

方法＃2：auto页边距

同样在容器处于列方向时，将margin-top: auto应用于页脚，使其远离其他弹性项目。 （似乎你已经熟悉这种方法了。）

以下是Methods for Aligning Flex Items

的详细说明

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