垫子抽屉内容中使用的Flex布局 [英] Flex layout used in mat-drawer-content

问题描述

我已经在导航抽屉中使用了这样的角度伸缩布局

I have used angular flex layout in navigation drawer like this

<mat-drawer-container>
    <mat-drawer #drawer mode="over" >
      <p>Drawer content</p>
      <p>
        <button mat-icon-button (click)="drawer.close()">
          <mat-icon>clear</mat-icon>
        </button>
      </p>
      </mat-drawer>
    <mat-drawer-content fxLayout="row" fxLayoutAlign="start center">

      <p>
        <button mat-icon-button (click)="drawer.open()">
          <mat-icon>menu</mat-icon>
        </button>
      </p>

   <router-outlet></router-outlet>
    </mat-drawer-content>
  </mat-drawer-container>

，但看起来像

如何将垫子抽屉容器拉伸到页脚?

how to stretch mat-drawer-container upto footer?

推荐答案

您的问题出在您的商品没有伸张的事实上.

Your issue comes from the fact that your items aren't stretched.

首先给您的html和body标签一个完整的高度:

Start by giving your html and body tags a full height :

html, body {
  height: 100%;
}

接下来，您必须制作一个主容器，在其中放置页眉，容器和页脚.该主容器将被拉伸和弯曲.

Next, you have to make a main container, where you will put your header, container, and footer. This main container will be stretched and flexed.

<div class="container" fxLayout="column">
  <header fxFlex="10%"/>
  <drawer fxFlex/>
  <footer fxFlex="10%"/>
</div>

在此设置中，页眉和页脚将分别占据页面的10％，而抽屉将占据剩余空间.

In this setup, your header and footer will take 10% of the page each, and the drawer will take the remaining space.

这篇关于垫子抽屉内容中使用的Flex布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！