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

我试图为每一页创建一个页脚。目标是将页脚居中并放置在页面底部。您可以检查my，或直接查看代码，如下所示

HTML

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

我注意到了类似的问题。然而，当我应用它的命题时，底部+位置设置，每个页面中的页脚都合并在一起，放在导航器窗口的底部。这是相关的

有人能帮忙吗？非常感谢。

您缺少职位：相对应用于class=“页面”。 这样，应用了绝对位置的元素就知道相对于父元素.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;
}

演示

试试这个：

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

div.page{
高度：300px；
宽度：180px；
边框：1px实心#000；
保证金：自动；
边缘底部：5px；
文本对齐：居中；
位置：相对位置；
}
分区页脚{
背景色：#DDD；
宽度：100%；
位置：绝对位置；
底部：0；
}
p{
宽度：15px；
颜色：白色；
背景色：红色；
文本对齐：居中；
保证金：自动；
底部：0；
}

检查我的答案，希望有帮助。您需要将

位置：相对

添加到页面div，将

位置：绝对

添加到页脚div@AlessandroIncarnati没有必要仅仅为了说你已经创造了一个答案而发表评论。发问者会自动收到通知（向下滚动并自己找出答案并不困难！）@Sverri M.Olsen有时我发现，如果用户没有立即回答，就可以向他们发送额外的通知。无论如何，谢谢你指出这一点。：）回答得很高兴。@AlessandroIncarnati如果他们没有回复第一个通知，那么第二个通知也不会有什么不同。这不是一场人气竞赛。只需添加你的答案，让人们在闲暇时对其进行评估和回应。显然，谢谢拉尔斯。我依靠的是JSFIDLE，它在代码中的位置是绝对的。谢谢你的回答，Alessandro，快速而简单。快乐编码：）谢谢Ushma，你的答案是对的，但我只能接受一个答案。祝你今天愉快！：）为什么OP要“试试这个”？一个好的答案总是会有一个解释，说明做了什么以及为什么这样做，不仅是为了OP，而且是为了未来的访客。