Question

我有一个布局，其中页脚是标题和内容的兄弟，但页脚低于窗口高度而不是在底部“正确”粘贴。

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，当标题和内容是与页脚的兄弟元素时，似乎没有任何内容。我正在使用遗留布局，因此我没有为标题和内容创建包装容器的选项。如何让页脚留在底部而不会掉到窗下？

Answer 1

使用单独的类

添加footer css

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

Answer 2

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

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

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

此外，您可能希望从body中移除边距以使其正确放置并删除页脚上的负边距。

＆＃13;

html, body {
  height: 100%;
  margin: 0;
}

.header, .footer, .push {
  height: 75px;
}

.content {
  min-height: calc(100% - 75px - 75px);
}

＆＃13;

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

＆＃13;

以下是此解决方案的fiddle。

标题和内容下降到窗口下方的粘性页脚

2 个答案: