带有页眉和内容的粘性页脚位于窗口下方答案

【问题标题】：Sticky footer with header and content dropping below window带有页眉和内容的粘性页脚位于窗口下方
【发布时间】：2018-10-03 18:07:25
【问题描述】：

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

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，但似乎没有人涵盖页眉和内容是与页脚同级元素的情况。我正在使用旧版布局，因此我没有为标题和内容创建包装容器的选项。如何让页脚保持在底部而不掉到窗口下方？

【问题讨论】：

【解决方案1】：

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

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。

【讨论】：

【解决方案2】：

将footer css 添加到单独的类中

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

【讨论】：