根据内容调整页脚位置

Question

我想根据页面内容调整页脚的位置。如果页面内容很少，则需要在内容之后显示页脚，如果页面内容较多，则希望在窗口底部显示页脚。

我做了一个demo：这里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 高度更大，请尝试使用js 添加padding-bottom 值。