How to position header, sidebox and mainbox? - css

Question

Demo: http://jsfiddle.net/zz1ou0bv/
HTML:
<div class="header">header</div>
<div class="sidebox">sidebox</div>
CSS:
.header {
background-color: red;
height:60px;
}
.sidebox {
width: 210px;
background-color: blue;
color: black;
position: absolute;
bottom: 0;
top: 0;
}
How do I position the blue box just under the red box? I could for example add top: 68px; to the .sidebox to fix the problem but is there any other way to position it automatically, I would like to change the header height without being forced to change the top tag in sidebox to make it fit.
How do I position a brand new div that takes up the WHOLE white area under the red box and besides blue box? This should be automatic in case header/sidebox changes height/width. The green content should be replaced with this new div: http://i.gyazo.com/a41107cb7c1844b439f045ad85d40aec.png

Answer 1

If you always want the sidebar to occupy 100% of the window you could try this approach:
html, body { height: 100%; }
.header {
background-color: red;
height:60px;
}
.sidebox {
width: 210px;
background-color: blue;
color: black;
bottom: 0;
top: 0;
min-height: 100%;
}
http://jsfiddle.net/zz1ou0bv/2/

Answer 2

Here's my attempt: http://jsfiddle.net/rL8z9bm0/ .
Regarding your second question you should always have some kind of relation between the blue and yellow boxes, either pixels or percentage (better)
.sidebox {
width: 30%;
...
}
.content {
left:30%;
...
}

Answer 3

Seems like a good use case for the flexbox here:
Fiddle with Flexbox
Here's the relevant source:
HTML
<div class="wrapper">
<div class="header">header</div>
<div class="sidebox">sidebox</div>
<div class="content">content</div>
</div>
CSS
body {
height: 100vh;
margin: 0;
}
.wrapper {
display: flex;
flex-flow: row wrap;
height: 100%;
}
.header {
background-color: red;
height:60px;
flex: 1 100%;
}
.sidebox {
flex: 1 auto;
background-color: blue;
color: white;
}
.content {
flex: 4 auto;
background-color: sienna;
color: white;
height: calc(100% - 60px);
}
Hope that helps.