带有边缘顶部的CSS粘滞页脚

时间:2015-09-02 21:23:59

标签: html css margin sticky-footer

我在Stack Overflow上找到了很多关于粘性页脚的解决方案,它对我有用。但是,我需要在我的内容div和#34;之间保持60px的距离。和我的"页脚div"。在我到目前为止找到的所有解决方案中,如果我为我的"页脚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
}

2 个答案:

答案 0 :(得分:3)

解决方案比我想象的要简单。只需增加#body div的node [cloud9folder]/server.js -p 8080 -a : 值。

答案 1 :(得分:1)

设置保证金底部:60px;在你的“content-div”上。您的粘性页脚具有绝对定位,可将其从页面流中移除。您在其上设置的边距将不会与其他元素交互。在内容div上设置一个边距只会使该div与页面底部保持60px,这是页脚占用的空间。