页眉和内容低于 window 的粘性页脚

Question

我有一个布局，其中页脚是页眉和内容的同级元素，但页脚低于 window 高度，而不是 "sticking" 正确位于底部。

HTML

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

CSS

html, body {
  height: 100%
}

.header, .footer, .push {
  height: 75px;
}

.content {
  margin-bottom: -75px;
  min-height: 100%;
}

我一直在查看 different options for sticky footer，none 似乎涵盖了页眉和内容与页脚是同级元素的情况。我正在使用旧版布局，因此我无法选择为页眉和内容创建包装器容器。如何让页脚保持在底部而不低于 window？

Answer 1

添加 footer css 和单独的 class

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

Answer 2

由于您的页眉和页脚是静态高度，您可以这样做：

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

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

此外，您可能希望删除 body 的边距以使其正确适合并删除页脚上的负边距。

html, body {
  height: 100%;
  margin: 0;
}

.header, .footer, .push {
  height: 75px;
}

.content {
  min-height: calc(100% - 75px - 75px);
}

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

这是此解决方案的 fiddle。

Sticky footer with header and content dropping below window