Я пытаюсь собрать простой 3-рядный макет в CSS. Это необходимо:

Основной контейнерный блок (ширина 100%, высота 100%), который содержит ...Липкий заголовок (фиксированная высота 48 пикселей)Средняя часть, которая заполняет все оставшееся пространство между верхним и нижним колонтитуломЛипкий нижний колонтитул (начальная высота 62 пикселя, но может измениться после загрузки страницы через JavaScript)

Вот'что яу нас так далеко:

HTML

    
        
            ...
        
        
            Stuff goes here
        
        
            ...
        
    
 

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    background-color:#2c3e50;
}

div#container {
    height:100%;
    width:100%;
}

div#headContainer {
    background-color:#e74c3c;
    height:48px;
    width:100%;
    z-index:1;
}

div#bodyContainer {
    overflow:auto;
    width:100%;
    top:48px;
    position:absolute;
    background-color:#FFFFFF;
}

div#footContainer {
    background-color:#c0392b;
    width:100%;
    position:absolute;
    bottom:0;
    padding:11px 18px;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

http://jsfiddle.net/MsKaj/2/I»

я изо всех сил пытаюсь понять, как я получаюbodyContainer» заполнить доступное пространство между верхним и нижним колонтитулом. Если бы нижний колонтитул был фиксированного размера, это было бы намного проще!

Какие-нибудь советы?