CSS 带页边距的粘性页脚

Question

我在 Stack Overflow 上找到了很多针对粘性页脚的解决方案，它们对我很有用。但是，我需要在 "content div" 和 "footer div" 之间保持 60px 的距离。在我目前找到的所有解决方案中，如果我为我的 "footer 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

设置底边距：60px；在你的 "content-div" 上。您的粘性页脚具有绝对定位，可将其从页面流中移除。您在其上设置的边距不会与其他元素交互。在您的内容 div 上设置边距只会使 div 与页面底部保持 60 像素，这是您的页脚占用的 space。

Answer 2

解决方案比我想象的要简单。只需增加我的 #body div.

的 padding-bottom 的值

CSS 带页边距的粘性页脚

CSS Sticky Footer with Margin-Top

html

css

margin

sticky-footer