Html 页眉和内容位于窗口下方的粘性页脚

我有一个布局，其中页脚是页眉和内容的同级，但页脚下降到窗口高度以下，而不是在底部正确“粘贴”

HTML

<div class="header">Header</div>
<div class="content">
  Content
  <div class="push"></div>
</div>
<div class="footer">Footer</div>

---

我已经看过了，当页眉和内容是页脚的同级元素时，似乎没有一个可以覆盖。我使用的是传统布局，因此我没有为标题和内容创建包装容器的选项。如何使页脚保持在底部而不掉到窗口下方？

使用单独的类添加

footer

css

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

---

由于页眉和页脚是静态高度，因此可以执行以下操作：

min-height: calc(100% - 75px - 75px);

我将它们分开（75px），这样我就知道一个用于页脚，一个用于页眉。如果其中一个静态高度发生变化，将来更容易改变

此外，您可能需要从

正文中删除边距，以使其正确匹配，并删除页脚上的负边距


html，正文{
身高：100%；
保证金：0；
}
.header、.footer、.push{
高度：75px；
}
.内容{
最小高度：计算（100%-75px-75px）；
}
标题
内容
页脚
@zgood谢谢，这似乎很有帮助。我用更多的解释把它变成了一个答案。
min-height: calc(100% - 75px - 75px);