根据内容调整页脚位置

Question

我想根据页面上的内容调整页脚的位置。如果我在页面上的内容很少，那么我需要在内容后显示页脚，如果我在页面上有更多内容，我想在窗口底部显示页脚。

我做了一个演示：这里https://stackblitz.com/edit/angular-59tthr?file=app%2Fapp.component.ts

当页面有更多内容时，页脚会粘到页面底部，但是如果我切换内容它仍处于相同的位置。

是否可以在内容之后准确设置页脚？

Answer 1

这可以提供帮助

我在你的演示中检查它是否正常工作。

.MainWrapper {
    position: relative;
    padding-bottom: 20px; /* this will be the height of your footer */
}
.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

如果您的footer身高较大，请尝试使用padding-bottom添加js值。