Split page into 4 equal sections with fixed header - css

Question

I am trying to divide a page into 4 equal sections (2x2 grid) with a fixed header. So far I have a it split into 4 but because of the header, the page is going bigger than 100%.
I want the 4 parts to only take up the available space on the screen and not make the page scroll but be equal.
HTML:
<header></header>
<div class="container">
<div class="block blue"></div>
<div class="block green"></div>
<div class="block purple"></div>
<div class="block red"></div>
</div>
CSS:
html, body {
height: 100%;
}
header {
width: 100%;
height: 117px;
background-color: grey;
}
.container {
width: 100%;
height: 100%;
}
.block {
width: 50%;
height: 50%;
float: left;
}
.blue {
border-top: 4px solid blue;
}
.green {
border-top: 4px solid green;
}
.purple {
border-top: 4px solid purple;
}
.red {
border-top: 4px solid red;
}
See demo so far: http://jsfiddle.net/Kas78/1/
I also want to be able to make it responsive so that each block can be changed to 100% width and a fixed height when the page is smaller than 690px so that needs to be kept in mind.

Answer 1

I'd recomment to change your code to this:
http://jsfiddle.net/NicoO/Kas78/2/
html, body {
height: 100%;
}
header {
height: 117px;
background-color: grey;
}
.container {
height: calc(100% - 117px);
}
.block {
width: 50%;
height: 50%;
float: left;
}
I throw out some width:100% since block elements will fill the parent element by default.