Angular 中的可滚动路由器插座

Question

我的页面很简单。无论屏幕大小如何，我都想要一个固定的页眉和页脚，并且只希望滚动内容更多（如果内容溢出）。

<div class="header">
 <h2>Title</h2>
</div>
<div class="content">
  <router-outlet></router-outlet>
</div>
<div class="footer">
  <h2>footer</h2>
</div>

我正在尝试这样的事情，但下面的代码不起作用。

固定页眉、页脚，内容可滚动

Answer 1

您可以使用 Flexbox 布局 (Flexible Box) 模块在页眉、内容和页脚之间对齐和分配空间。

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: 列属性。

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

flex-shrink 定义如果没有足够的可用空间，flexbox 项目应该收缩多少。

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、正文和容器元素很重要

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

带有 angular 和 flexbox 的 StackBlitz 示例：

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