页脚适用于 Angular <router-outlet>

Question

我正在用 Angular2+ 创建一个网站，基本上在主文件中有 3 个“部分”：页眉、内容、页脚。

目标是使页眉和页脚的行为符合预期，即：页眉始终位于顶部，但当我滚动时，它会消失。内容为 100vh - 页眉大小 - 页脚大小。并且页脚总是在底部，所以如果内容中没有任何内容，则页脚在底部，当有不滚动无法显示的内容时，页脚消失并转到页面底部。

嗯，只有当内容直接放在 div 内容中时才有效。如果内容来自另一个组件，并且来自 div 内容内的标签，则页面无法按预期工作，例如内容超出页脚。

您可以在此处查看完整代码：https://github.com/joaocasarin/joaocasarin.github.io

您可以在这里查看网站：https://joaocasarin.github.io

首页一切正常，因为内容小，不用滚动。

但是如果你去技能菜单，你会看到问题：

Answer 1

删除：

height: calc(100vh - 80px - 50px);

在 app-skills 组件中的 .wrapper 上。

在 app-skills 组件中添加 .wrapper：

position: relative;
min-height: 100%;
padding: 0 0 100px;

其中“100px”是您选择的页脚高度。

移除 .wrapper 的高度后：

已编辑： 不要在.footer 上添加样式。

Stackblitz 编辑：https://stackblitz.com/edit/angular-discord-ht7hmq?file=src%2Fapp%2Fskills%2Fskills.component.css