页脚适用于 Angular<router-outlet></router-outlet>

Question

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

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

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

你可以在这里看到整个代码： https://github.com/joaocasarin/joaocasarin.github.io

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

在首页一切都好，因为内容很小，不需要滚动。

但是如果你 go 到 Skills 菜单，你会看到问题：

Answer 1

消除：

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

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

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

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

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

高度 on.wrapper 移除：

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

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