粘在页面底部的页脚

Question

您好，我有一个 CSS 问题，因为我试图将页脚粘贴到页面底部，但它只会将其粘贴到视口的下方，而不是文档的底部。

有人可以帮我理解为什么会这样吗？

我的 css 和 html 非常简单，尽管在阅读了大量示例并尝试之后，我仍然无法使其正常工作。我不希望我的页脚在包装器内，而不是在包装器之外，我也不想在包装器上设置 height:100%。

我的 html 如下所示：

<div class="wrapper">
... some content
</div>
<div class="footer">

</div>

还有我的 CSS：

html {
   height: 100%;
   margin: 0;
   padding: 0;
   position:relative;
}

body {
    position:relative;
    height: 100%;
    background-color: #D8D8D8;
    margin: 0;
    padding: 0;
    font-family: "Trebuchet MS", Verdana, tahoma, arial, serif;
    font-size: 12pt;
}

.wrapper {
  position:relative;           
  margin-left: auto;
  margin-right: auto;
  width: 1024px;
  padding: 6px;
  margin-bottom: 30px;

}

.footer {
    position: absolute;
    bottom:0;
    left: 50%;
    margin-left: -512px;
    height: 25px;        
    background-color: #E6E6E6;
    width: 1024px;
    padding: 6px;
    clear:both;

}

是否可以使用包装器外部的页脚来执行此操作？

我认为在页脚上设置绝对位置意味着它将基于 body 或 html 定位，因为它们是具有 position:relative 的下一个元素，但 bottom:0 似乎只是视口的底部尽管包装器 div 远远超出此范围，但包含大量内容。

这样做的结果是，当包装器中有很多内容时，页脚实际上会停留在页面的中间，因为底部被计算为视口的底部。

谢谢

Answer 1

不需要一直使用定位。该属性仅适用于特定情况以专门“定位”内容。

我想删除

position: absolute;

来自

  .footer

应该能解决问题。