100% content with header

Resize the "result window" to see the scrollbar

by kuyabiye

HTML

<html>
    <body>
        <div id="header">header</div>
        <div id="content">
            <div class="push"></div>
            content<br />
            content<br />
            content<br />
            content<br />
            content<br />            
            content<br />            
            content<br />            
            content<br />            
            content<br />            
            <div class="push"></div>           
        </div>
        <div id="footer">footer</div>
    </body>
</html>

CSS

html, body {
    height: 100%;   
    padding: 0 !important; /* for cleaning jsfiddle.net default padding */
}

#header,
#footer {
    height: 100px;
    background: #e3e3e3;  
    position: relative;
    z-index: 2;
}

#content {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: -100px auto; 
    background: #f3f3f3;
    width: 150px;   
    position: relative;
    z-index: 1;
}

.push {
    height: 100px;
}

JavaScript

/* sticky header */