占用<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);
}

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