Гибкая верстка, используемая в содержании коврика

Question

Я использовал угловую гибкую компоновку в навигационном ящике вот так

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

, но похоже на

как растянуть контейнер-ящик-контейнердо нижнего колонтитула?

Answer 1

Ваша проблема связана с тем, что ваши предметы не растянуты.

Начните с того, что ваши HTML-теги и теги body будут иметь полную высоту:

html, body {
  height: 100%;
}

Далее вам нужно создать основной контейнер, в который вы поместите заголовок, контейнер и нижний колонтитул.Этот основной контейнер будет растянут и согнут.

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

В этой настройке ваш верхний и нижний колонтитулы будут занимать 10% каждой страницы, а ящик - оставшееся пространство.

Answer 2

.menu-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

<mat-sidenav-container class="menu-container">

Это сработало для меня

Answer 3

Вы можете использовать «полный экран», чтобы растянуть его в нижний колонтитул.

<mat-drawer-container fullscreen>
   <mat-drawer #drawer mode="over" >
    <p>Drawer content</p>
    <p>
      <button mat-icon-button>
       <mat-icon>clear</mat-icon>
      </button>
    </p>
  </mat-drawer>
<mat-drawer-content fxLayout="row" fxLayoutAlign="start center">

  <p>
    <button mat-icon-button>
     <mat-icon>menu</mat-icon>
   </button>
 </p>

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