Question

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

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

我的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;

}

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

我认为在页脚上设置绝对位置意味着它将根据body或html进行定位，因为它们是下一个元素的位置：相对但底部：0似乎只是视口的底部虽然包装div在很多内容的范围内远远超过了它。

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

由于

Answer 1

不需要一直使用定位。该属性仅适用于某些特殊“定位”内容的情况。

我想删除

position: absolute;

这

  .footer

应该解决问题。

页脚粘在页面底部

1 个答案: