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 ?的类似问题。但是，当我应用其命题底部 + 位置设置时，每个页面中的页脚都会合并在一起，放在导航器窗口的底部。这是相关的JSFiddle

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

Answer 1

您缺少应用于 class =“page”的 位置：相对; 。这样，具有绝对位置的元素知道需要为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;
}

DEMO http://jsfiddle.net/9xzb9m48/3/

Answer 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;
}

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

2 个答案: