Relative div hauteur

Je veux diviser la vue en quatre parties.
Un en-tête en haut, en utilisant toute la largeur de la page et hauteur fixe.
Le reste de la page est divisée en deux blocs de la même hauteur, la partie supérieure de ceux-ci contient deux de même taille des blocs les uns à côté des autres.

Ce que j'ai essayé (sans la tête):

<div id="wrap">
    <div id="block12">
        <div id="block1"></div>
        <div id="block2"></div>
        <div class="clear"></div>
    </div>
    <div id="block3"></div>
</div>

Et le CSS:

#wrap {
    width: 100%;
    height: 100%;
}

#block12 {
    width: 100%;
    max-height: 49%;
}

    #block1, #block2 {
        width: 50%;
        height: 100%;
        float: left;
        overflow-y: scroll;
    }


#block3 {
    width: 100%;
    height: 49%;
    overflow: auto;
    /*background: blue;*/
}

.clear { clear: both; }

Apparemment, à l'aide d'un pourcentage de la valeur pour la hauteur ne fonctionne pas de cette façon. Pourquoi donc?

Veuillez fournir un Violon..

OriginalL'auteur Explicat | 2013-09-30