css - 使用 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，也需要一个。

一个选项是使用视口(viewport)单位，因此从 height: 100% 更改为 height: 100vh 并且 #home-content 将填充视口(viewport)。

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