Position footer at bottom of page having fixed 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="header">Header</div>

<div id="content">
    <div class="header-spacer"></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 class="footer-spacer"></div> 
</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 */
}

#header {
    position: fixed;
    top: 0;
    left: 0; right: 0; /* Make it fill the whole horizontal space */
}

.header-spacer, #header { height: 50px; }
.footer-spacer, #footer { height: 100px; }

#footer {
    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;
}