100% content with header

Resize the "result window" to see the scrollbar

by kuyabiye

HTML

<div id="header">header</div>
<div id="sidebar">
    <div class="push"></div>sidebar
    <br />sidebar
    <br />sidebar
    <br />sidebar
    <br />sidebar
    <br />sidebar
    <br />sidebar
    <br />
</div>
<div id="content">
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
</div>

CSS

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

#header {
    height: 40px;
    background: #e3e3e3;
    position: relative;
    z-index: 2;
}
#sidebar {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: -40px 0 0;
    background: #f3f3f3;
    width: 150px;
    position: relative;
    z-index: 1;
    float: left;
}
#content {
    margin: 0 0 0 160px;
}

.push {
    height: 40px;
}

JavaScript

/* sticky header */