使用 Flexbox 的完整内容高度和对齐卡片

Question

我正在努力使用 Flexbox 对齐 Angular 4 w/Angular Material 中的项目。我想完成一个类似于附件#1 中所示的布局，其中第一张卡片位于顶部，第二张卡片位于组件内容的底部。组件本身应该占据屏幕上剩余空间的高度（设备高度减去工具栏高度）。

附件 #2 显示了我到目前为止所取得的成就。以下 HTML 标记和 CSS 显示了附件 #2 后面的代码。

谁能告诉我这样做的正确方法是什么？我不想搞乱固定位置或其他什么，我想实现一个与 Angular Material 兼容且不影响其他组件布局的解决方案。

提前致谢！

附件 #1：

附件#2：

HomeComponent 的 HTML 标记：

<div id="home-content"> 
  <mat-card id="title-card">
    <mat-card-title>Lorem.</mat-card-title>
    <mat-card-content>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis magnam sint accusamus facere ducimus modi non voluptates consectetur exercitationem ullam.</mat-card-content>
  </mat-card>
  <mat-card>
    <mat-card-header>
      <img mat-card-avatar src="http://lorempixel.com/200/200" alt="">
      <mat-card-title>Lorem, ipsum dolor.</mat-card-title>
      <mat-card-subtitle>Lorem ipsum dolor sit amet consectetur adipisicing elit.</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate repellat animi reiciendis eius mollitia totam sint natus hic unde iusto.</mat-card-content>
    <mat-card-actions>
      <button mat-raised-button color="primary">Challenge!</button>
    </mat-card-actions>
  </mat-card>
</div>

对应的CSS代码：

div#home-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 3px solid black;
    justify-content: space-between;
}

Answer 1

当为height 使用百分比时，每个父母，一直到html/body，也需要一个。

一种选择是使用视口单位，因此将height: 100% 更改为height: 100vh，#home-content 将填充视口。

div#home-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;                        /*  changed  */
    border: 3px solid black;
    box-sizing: border-box;               /*  added, to avoid scroll and make
                                              border size be included in set height  */
}

---

另一种是将其父级设置为display: flex; flex-direction: column，然后删除height: 100%并添加flex-grow: 1，#home-content将填充其父级。

div#home-content {
    flex-grow: 1;                         /*  added  */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 3px solid black;
}

Answer 2

@LGSon：谢谢你的回答。我按照你说的做了，并且把父容器也做成了弹性容器。现在它可以工作了，但我不确定它是否会影响不需要此布局的其他组件中的其他布局。

对于其他可能遇到同样问题的人来说，这里的 CSS 代码对我有用。在屏幕截图 #1 中，您可以看到所有相关元素带有彩色边框的结果。再次感谢@LGSon 的提示：

html, body {
    margin: 0;
    height: 100%; // html and head must be 100% height in order to make that work
}

app-root {
    height: 100%; // app-root needs to be 100% too
    display: flex; // make the app-root a flex container
    flex-direction: column; // flex-direction is column so that the toolbar is above the component's content
}

md-toolbar {
    flex-grow: 0; // if there is more space in height than needed toolbar won't grow
}

app-root > *:nth-child(3) { // the third child of app-root contains the component's content. The first child is the toolbar, the second one is the empty router-outlet element. Perhaps this is different in your HTML structure. 
    border: 3px solid black;;
    flex-grow: 1;
    display: flex; // is also a flex container with just one item which is div#home-content
}

div#home-content {
    align-self: stretch; // use the whole space available in height
    border: 3px solid greenyellow;
    display: flex; // is a flex-container too so that the cards can be aligned accordingly
    flex-direction: column;
    justify-content: space-between; // space-between is responsible for the first card to be at the top and the second card to be at the bottom
}

屏幕截图 #1：