停留在页面底部的页脚

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

应该解决问题。