CSS Sticky Footer with Margin-Top

Question

I have found a lot of solutions for sticky footer here on Stack Overflow and it works for me. However, I need to keep a 60px distance between my "content div" and my "footer div". In all the solutions I found so far, if I set margin-top: 60px for my "footer div" it didn't work.

A solution I found:

<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
}

Calve

Answer 1

The solution was simpler than I thought. Just increase the value of padding-bottom of my #body div.

Calve

Answer 2

Set margin-bottom:60px; on your "content-div". Your sticky footer has absolute positioning which removes it from the flow of the page. The margins you set on it won't interact with other elements. Setting a margin on your content div just makes that div stay 60px from the bottom of the page which is the space that your footer is occupying.

Spermatium