角度可滚动路由器出口

可以使用FrasBox布局(灵活框)模块在标题、内容和页脚之间对齐和分配空间。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

<div class="container">
  <div class="header">
  <nav>
    <a routerLink="/home" routerLinkActive="active">Home</a>
    <a routerLink="/about" routerLinkActive="active">About</a>
  </nav>
  </div>
  <div class="content">
    <router-outlet></router-outlet>
  </div>
  <div class="footer">
    <h2>footer</h2>
  </div>
</div>

我们使用class=container的外部元素来应用display:flex和flex-direction:column属性。

在我们的CSS中,我们将使用flex-shrink和flex-grow来分发内部元素。

弯曲收缩 定义如果没有足够的可用空间,flexbox项应缩小多少。

弹性增长

.container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header{
  flex-shrink: 0;
  flex-grow: 0;
}
.content{
  flex-shrink: 1;
  flex-grow: 1;
}

.footer{
  flex-shrink: 0;
  flex-grow: 0;
}

最后,必须将高度100%设置为HTML、body和container元素

html, body{
 height: 100%;
 padding: 0;
 margin: 0;
}

StackBlitz示例,包括angular和flexbox:

https://stackblitz.com/edit/angular-fixed-footer-header

您是否考虑过使用flexbox在页眉和页脚之间对内容进行圣杯排序。

html,
body,
.page {
  margin: 0;
  height: 100%;
}

.page {
  display: flex;
  flex-direction: column;
}

.header {
  background: tomato;
  flex: 0 0 auto;
}

.footer {
  background: lightgreen;
  flex: 0 0 auto;
}

.content {
  background: lightskyblue;
  flex: 1 1 auto;
  position: relative;
  overflow-y: auto;
}

<div class="page">
  <div class="header">
    <h2>Title</h2>
  </div>
  <div class="content">
    <router-outlet></router-outlet>
    lorem ipsum 
    <br /><br /><br /><br /><br /><br /><br /><br /> ||<br /> ||<br />v<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> much contendo
   
  </div>
  <div class="footer">
    <h2>footer</h2>
  </div>
</div>