html - 粘在页面底部的页脚

Question

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

有人能帮我理解这是为什么吗？

我的 css 和 html 非常简单，尽管在阅读了大量示例并尝试之后我仍然无法让它工作。我不希望我的页脚在包装内，而是在包装外，我也不想在包装上设置高度: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;

}

是否可以用 wrapper 外的页脚来做到这一点？

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

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

谢谢

Answer 1

定位不需要一直用。该属性仅在某些情况下用于专门“定位”内容。

我想删除

position: absolute;

来自

  .footer

应该可以解决问题。