html - 如何在 CSS 中将页脚放在页面底部？

Question

我尝试为每个页面创建页脚。目标是使页脚居中并将其放置在页面底部。你可以查看我的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

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

Answer 1

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

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/