Is it possible to do this without JavaScript (html layout)

Question

The page has the following layout:

<div id="main" style="min-height:500px;"> 
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
<div>

The main div can have a fixed height or min-height (style="height:500px;" or style="min-height:375px;").

Is it possible to make the footer and header take as much height as they need and allow the content to take the rest (content.height = main.height - (header.height + footer.height)) (without using JavaScript, elastic header and footer, content takes the rest)?

Answer 1

Yes, it is possible.

HTML:

<div id="main"> 
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
<div>

CSS:

html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* needed for #main min-height */
}

div#main {
    position: relative; /* needed for footer positioning */
    height: auto !important; /* real browsers */
    height: 500px; /* IE6: treated as min-height*/
    min-height: 500px; /* real browsers */
}

div#header {
    /* Will be as high as its content */
}

div#content {
    /* Will be displayed below #header regardless to its height */
    padding: 0px 0px 50px 0px; /* bottom padding for footer + space */
}

div#footer {
    position: absolute;
    width: 100%;
    height: 40px; /* Needs to be fixed size because of #content padding-bottom */
    bottom: 0; /* stick to bottom */
}

This actually don't set #content height as you wanted, but displays everything as it should be (#main has expected height, #footer is at the bottom and doesn't cover #content).