我遇到了一个问题，就是总是将页脚固定在页面底部，而且页面中没有足够的内容来填充页脚。

我在网上发现了许多类似的问题，所有这些问题都建议作为添加类似以下代码的解决方案：

footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}

在这里您可以看到初始情况（页脚位于页面中间，表示内容页为空）：

应用代码后，它似乎是正确的。事实上，页脚将位于页面底部，but not the way I want it.

The problem is that when the page is full of content (i.e. homepage), the footer is covering the content!

我希望页脚始终位于页面的末尾，如果页面为空，则位于屏幕的末尾。

你知道如何做到这一点吗？

注意：我使用Astra theme和Elementor Pro作为主题生成器。我的页脚是用Elementor创建的。

非常感谢所有愿意帮忙的人！

.site-content {
  min-height: calc(100vh - [insert header height here] );
}