html - Angular Material md-card 和 Flex Layout 没有填满屏幕

Question

我正在尝试让卡片组件达到 100% 的高度，我一定是做错了什么。我已经尝试在 scss 中全局设置，在组件中本地设置，内联，我可以想到的每个 flex 布局组合来实现这一点。告诉我古代功夫大师的方式！

<div class="container" fxLayout="column" fxLayoutAlign="center stretch">
  <div class="container" fxLayout="row" fxLayoutAlign="center stretch">
    <md-card fxFlex='99'>
        <div class="navigation">
            <nav md-tab-nav-bar>
                <a md-tab-link *ngFor="let link of navigationLinks" [routerLink]="[link]" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">
            {{link}}
            </a>
            </nav>
        </div>
        <router-outlet></router-outlet>
    </md-card>
</div>

Answer 1

首先，您的元素没有正确打开和关闭（顶部有 2 个 opening ，底部只有一个 close ）。其次，请提供 plunker，以便其他人可以看到并理解您想要实现的目标。至于现在还不清楚你在说什么 100% 高度。将只占用显示内容所需的空间。只要您添加内容，它就会增长。如果您希望它更大，则需要指定固定高度值。