为什么<router-outlet>组件不能覆盖100％的可用高度？

Question

我有3个组成部分：

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

红色边框组件称为PrincipalComponent，它应具有因删除页眉和页脚占用的空间而产生的可用高度。如何使PrincipalComponent包围可用空间的总高度？

这是我的代码：

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

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

    @Component({
      selector: 'principal',
      template: '<div style="height:100%;border:1px solid red;"> <h1>animal selected: {{animal}}</h1></div>',
      styles: [`h1 { font-family: Lato; }`]
    })
    export class PrincipalComponent  {
      animal:any;
      constructor(){
      }
      getAnimal(item){
        console.log(item);
        this.animal=item.animal;
      }

    }


@Component({
 selector: 'menu',
 template: `<div style='border:1px solid blue'>Select a animal: <br> <button 
*ngFor="let item of aAnimals" (click)="selectAnimal(item);" 
 style="display:block;">{{item.animal}}</button></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包围了路由器的出口。

Answer 2

在index.html中写以下CSS

<style>
  html, body {
  display: block;
  height: 100%;
  margin: 0;
    padding: 0 10px;
}
my-app {
    display: flex;
    height: 100%;
    flex-direction: column;
}
footer {
  display: block;
}
footer > div {
  position: relative !important;
}
principal {
    display: flex;
    flex-direction: column;
    flex: 1;
}
</style>

您必须为加载到<router-outlet>的组件手动提供height和其他css属性

Stackblitz Demo adjusting height without styles.css