Question

我有这样的div：

<div class="container">
  <div class="header"></div>
  <div class="body"></div>
  <div class="footer"></div>
</div>

现在我将这种风格用于我的容器和页脚：

html, body {
  height:100%;
}
div.container {
  min-height: 100%;
  position: relative;
}
div.footer {
  width:100%;
  height: 40px;
  positioin: absolute;
  bottom: 0px;
}

所以，页脚相对于页面保持在底部，这很好，但我发现了两个问题：

如果body div的内容太长，它将与页脚重叠！
我希望页脚的背景颜色跨越整个浏览器视图端口，但目前它的宽度与容器div一样宽。

如何解决这个问题？

Answer 1

我最好的建议是使用A CSS Sticky Footer，就像魅力一样。

Answer 2

将页脚div从容器中取出并给出marin-top :-( height：px）px;。

<div class="footer"></div>

html, body {
  height:100%;
}
div.container {
  min-height: 100%;
}
div.footer {
  width:100%;
  height: 40px;
  margin-top:-40px;
}

Answer 3

您可能想尝试bottom: -40px;。

bottom属性定位元素，以便元素的 bottom 被包含元素的底部偏移此量。因此，如果您的示例中有bottom: 0;，则元素的底部与其包含元素的底部对齐，因此它将与其重叠。

我希望页脚的背景颜色跨越整个浏览器视图端口，但目前它的宽度与容器div一样宽。

这是因为width: 100%;是相对于元素的包含块定义的，它是div.container（设置为position: relative）。您必须将其从此容器中取出，或者不将容器定义为position: relative;以解决此问题。

如何正确定位页面底部的div？

3 个答案: