带有页边距的CSS粘性页脚

Question

我在Stack Overflow上找到了很多用于粘贴页脚的解决方案，它对我有用。 但是，我需要在“内容div”和“页脚div”之间保持60px的距离。 到目前为止，在我发现的所有解决方案中，如果我为“页脚div”设置margin-top: 60px ，那将不起作用。

我发现的解决方案：

<div id="container">
    <div id="body">
        <div id="teste">
        </div>
    </div>
    <div id="footer">
    </div>
</div>

html,
body {
  margin:0;
  padding:0;
  height:100%;
}

#container {
  min-height:100%;
  position:relative;
}

#teste {
  background: red;
  height: 500px;
}

#body {
  padding:10px;
  padding-bottom:60px;   /* Height of the footer */   
}

#footer {
  position:absolute;
  bottom:0;
  width:100%;
  height:60px;   /* Height of the footer */
  background:#6cf;
  margin-top: 60px; <---- this didn't work
}

Answer 1

解决方案比我想象的简单。 只需增加#body div的padding-bottom的值#body 。

Answer 2

设置margin-bottom：60px; 在您的“ content-div”上。 粘性页脚具有绝对的定位，可将其从页面流中删除。 您在其上设置的边距不会与其他元素交互。 在内容div上设置边距仅会使该div与页面底部（页脚所占据的空间）保持60px的距离。