占用 <router-outlet> 可用空间的 100%

Question

我正在使用 3 个组件：

<menu (setAnimal)='setAnimal($event)' ></menu>
 //principalComponent
<router-outlet (activate)='onActivate($event)'></router-outlet>
<footer></footer>

红色边框组件称为PrincipalComponent (<router-outlet>)，它应该具有移除页眉和页脚占用空间后的可用高度。如何使PrincipalComponent 包含可用空间的总高度？

这是我的代码：

https://stackblitz.com/edit/angular-8tgjnk?file=app/principal.component.ts

import { Component, Input } from '@angular/core';

   @Component({
    selector: 'principal',
    template: '<div style="height:100%;border:1px solid red;"> outer- 
     outlet</div>',
     styles: [`h1 { font-family: Lato; }`]
   })

   @Component({
    selector: 'menu',
    template: `<div style='border:1px solid blue; height:100px'>THIS IS THE 
    MENU</div>`,
    styles: [`h1 { font-family: Lato; }`]
  })

 @Component({
  selector: 'footer',
  template: `<div style='border:1px solid green'><h1>THIS IS THE FOOTER 
  </h1> </div>`,
  styles: [`div{position: absolute;bottom: 0;width: 100%;}`]
 })

Answer 1

您总是可以将路由器插座放在样式化的 div 中。

<menu (setAnimal)='setAnimal($event)' ></menu>
<div class="principal-container">
   <router-outlet></router-outlet>
</div>
<footer></footer>

styles.scss：

.principal-container {
   height: calc(100vh - $footer-height -$header-height);
}

或任何其他您想要设置这些矩形样式的方式。