Position footer at bottom of page having header

This is an answer to : Position footer at bottom of page having fixed header On Stackoverflow: http://stackoverflow.com/questions/18469262/position-footer-at-bottom-of-page-having-fixed-header

by Hashem Qolami

HTML

<div id="content">
    <div id="header">Header</div>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe tempore officia neque quasi ipsa impedit porro iure veritatis eius autem delectus qui aliquam excepturi culpa ipsam doloremque numquam asperiores repellendus.</span>
    <span>Quaerat aliquid molestiae quibusdam odio nesciunt deleniti rem. Minima quos tenetur maxime ratione aperiam ut dolorem atque totam error natus eligendi officia nostrum! Laudantium at consequuntur explicabo ipsa laborum qui.</span>
    <span>Ex explicabo veritatis optio rerum tempore ad necessitatibus illum consequatur magni sed sapiente ratione qui voluptate. Unde iure iste fugiat esse nihil ab voluptate. Recusandae accusantium fugit expedita atque ab.</span>
    <span>Repellendus tempora voluptatibus id beatae ipsa odio quasi qui culpa nam enim laborum consequatur quod libero sapiente dignissimos placeat itaque officia magnam nihil laudantium temporibus quo asperiores. Non consectetur earum.</span>
    <span>Delectus ad officiis culpa quia quae nam vero voluptate dolorum enim inventore nemo in assumenda necessitatibus labore iste saepe est incidunt quam dolor consequatur odio sint minima mollitia! Tempore enim.</span></p>
</div>
<div id="footer">Footer</div>

CSS

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

/******** + Sticky Footer including Header ********/
#content {
    min-height: 100%;
    margin-bottom: -100px; /* Equivalent to footer's height */
    padding-bottom: 100px; /* Equivalent to footer's height */
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#header {
    height: 50px;
}

#footer {
    height: 100px;
    position: relative;
    z-index: 1;
}
/*************** - Sticky Footer ******************/



/********  S T Y L I N G  ********/

#content {
    background-color: gold;
}

#header {
    background-color: darkorange;
}

#footer {
    background-color: darkcyan;
    color: white;
}