angular - 占用 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%;}`]
 })

标签： angular

Answer 1

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

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

样式.scss：

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

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