Static/Fixed Sidebar and Fluid Content.

I have three DIVs, one is the header at the top which should be fixed (should not scroll), width 100%, height 50px; another is a sidebar to the left which needs to be 100% of browser's height, fixed width of 200px and another DIV for the main content to the right which will be fluid in width, that is 100% of the remaining width (total minus 200px).

Example :)

<style type="text/css">
* {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
html, body {
    height:100%;
    margin:0;
}
#header {
    width: 100%;
    height: 50px;
    background-color: red;
    position: fixed;
    z-index:999;
}
#parent {
    width:100%;
    height:100%;
}
#sidebar {
    padding-top:50px;
    /* padding-top must be the same as header height */
    width:200px;
    height:100%;
    background-color: blue;
    box-sizing:border-box;
    position: fixed;
    z-index:99;
}
#main-content {
    position: relative;
    width: 100%;
    padding-left:200px;
    /* padding-left must be the same as sidebar width */
    height: auto;
    /* This could be anything, content should scroll vertical */
    background: green;
    box-sizing:border-box;
    padding-top: 50px;
    /* padding-top must be the same as header height */
}
#test {
    height: 1200px;
    background: black;
    width:50px;
}
</style>

<div id="header"></div>
<div id="parent">
    <div id="sidebar"></div>
    <div id="main-content">
        <div id="test"></div>
    </div>

</div>


Output :)