CSS Sticky Footer Margin

Question

I do NOT want a FIXED footer, I need a STICKY footer.

My sticky footer worked fine at first but when the content is at a certain height, there is a

Answer 1

DISPLAY TABLE = NO JS and NO fixed height!

Works in modern browsers ( IE 8 + ) - I tested it in several browser and it all seemed to work well.

I discovered this solution because I needed a sticky footer without fixed height and without JS. Code is below.

Explanation: Basically you have a container div with 2 child elements: a wrapper and a footer. Put everything you need on the page ( exept the footer ) in the wrapper. The container is set to display: table; The wrapper is set to display: table-row; If you set the html, body and wrapper to height: 100%, the footer will stick to the bottom.

The footer is set to display: table; as well. This is necessary, to get the margin of child elements. You could also set the footer to display: table-row; This will not allow you to set margin-top on the footer. You need to get creative with more nested elements in that case.

The solution: https://jsfiddle.net/0pzy0Ld1/15/

And with more content: http://jantimon.nl/playground/footer_table.html

/* THIS IS THE MAGIC */

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  margin: 0;
  padding: 0;
}
html,
body,
#container,
#wrapper {
  height: 100%;
}
#container,
#wrapper,
#footer {
  width: 100%;
}
#container,
#footer {
  display: table;
}
#wrapper {
  display: table-row;
}
/* THIS IS JUST DECORATIVE STYLING */

html {
  font-family: sans-serif;
}
#header,
#footer {
  text-align: center;
  background: black;
  color: white;
}
#header {
  padding: 1em;
}
#content {
  background: orange;
  padding: 1em;
}
#footer {
  margin-top: 1em; /* only possible if footer has display: table !*/
}

  

    

      HEADER
    
    

      CONTENT
      

      
some more content
      

      
even more content
    
  
  

    

      FOOTER
    
    

    

    

      MORE FOOTER