如何在 CSS 页面底部放置页脚？答案

【问题标题】：How to place a footer at the bottom of a page in CSS?如何在 CSS 页面底部放置页脚？
【发布时间】：2015-09-25 11:12:16
【问题描述】：

我尝试为每个页面创建一个页脚。目标是使页脚居中并将其放置在页面底部。可以查看我的JSFiddle，或者直接看代码如下。

HTML

<div id="page1" class="page">
  <div class="footer">
    <p>1</p>
  </div>
</div>

CSS

div.page {
    height: 300px;
    width: 180px;
    border: 1px solid #000;
    margin: auto;
    margin-bottom: 5px;
    text-align: center;
}
div.footer {
    background-color: #DDD;
    width: 100%;
    bottom: 0; /* doesn't work */
}
p {
    width: 15px;
    color: white;
    background-color: red;
    text-align: center;
    margin: auto;
    bottom: 0;
}

我看到了关于How to position div at the bottom of a page ? 的类似问题。但是，当我应用它的提议时，bottom + position 设置，每个页面中的页脚都合并在一起，放置在导航器窗口的底部。这是相关的JSFiddle

有人可以帮忙吗？非常感谢。

【问题讨论】：

查看我的回答，希望对您有所帮助。
你需要将position:relative添加到页面div和position:absolute到页脚div
@AlessandroIncarnati 无需评论只是说您已经创建了答案。提问者会自动收到通知（向下滚动并自己弄清楚并不难！）。
@Sverri M. Olsen 有时我发现如果用户没有立即回复以向他们发送附加通知，这很有用。无论如何，感谢您指出这一点。 :) 很高兴回答。
@AlessandroIncarnati 如果他们没有响应第一个通知，那么第二个通知不会有任何影响。这不是人气竞赛。只需添加您的答案，让人们在闲暇时进行评估和回应。

标签： html css

【解决方案1】：

您缺少应用于 class="page" 的 position: relative;。这样，应用了绝对位置的元素就知道相对于父元素 .page 需要底部：0。

div.page {
    height: 300px;
    width: 180px;
    border: 1px solid #000;
    margin: auto;
    margin-bottom: 5px;
    text-align: center;
    position:relative;
}
div.footer {
    background-color: #DDD;
    width: 100%;
    bottom: 0; /* it works now */
    position: absolute;
}
p {
    width: 15px;
    color: white;
    background-color: red;
    text-align: center;
    margin: auto;
    bottom: 0;
}

演示 http://jsfiddle.net/9xzb9m48/3/

【讨论】：

谢谢拉斯，很明显。我依赖于在代码中具有绝对位置的 Jsfiddle。
感谢您的回答亚历山德罗，快速而简单。快乐编码:)

【解决方案2】：

试试这个：

div.page {
  height: 300px;
  width: 180px;
  border: 1px solid #000;
  margin: auto;
  margin-bottom: 5px;
  text-align: center;
  position: relative;
}
div.footer {
  background-color: #DDD;
  width: 100%;
  position: absolute;
  bottom: 0;
}
p {
  width: 15px;
  color: white;
  background-color: red;
  text-align: center;
  margin: auto;
  bottom: 0;
}

【讨论】：

谢谢 Ushma，你的回答是对的，但我只能接受一个答案。祝你今天过得愉快！ :)
为什么 OP 应该“试试这个”？一个好的答案总是会解释所做的事情以及这样做的原因，不仅适用于 OP，而且适用于 SO 的未来访问者。