Przyklejony nagłówek, lepka stopka (zmienna wysokość), płynny środek?

Question

Oct 07, 2013, 10:55 AM

Przyklejony nagłówek, lepka stopka (zmienna wysokość), płynny środek?

Próbuję połączyć prosty układ 3-rzędowy w CSS. To potrzebuje:

Główny pojemnik div (100% szerokości, 100% wysokości), który przechowuje ...Przyklejony nagłówek (ustalona wysokość 48 pikseli)Środkowa sekcja, która wypełnia całą pozostałą przestrzeń między nagłówkiem i stopkąPrzyklejona stopka (początkowa wysokość 62px, ale może zmienić się po załadowaniu strony przez javascript)

Oto co mam do tej pory:

HTML

<body>
    <div id="container">
        <div id="headContainer">
            ...
        </div>
        <div id="bodyContainer">
            Stuff goes here
        </div>
        <div id="footContainer">
            ...
        </div>
    </div>
 </body>

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/

Staram się wypracować, jak uzyskać „bodyContainer”, aby wypełnić dostępną przestrzeń między nagłówkiem a stopką. Gdyby stopka miała stały rozmiar, byłoby to o wiele łatwiejsze!

Jakieś wskazówki?