javascript - 页脚适用于 Angular

Question

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

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

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

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

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

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

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

标签： javascripthtmlcssangular

Answer 1

消除：

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

在.wrapper应用程序技能组件中。

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

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