<blockquote>
  <p>What's the best way to make an element of 100% minimum height across a
  wide range of browsers ?</p>
</blockquote>

<p>In particular if you have a layout with a <code>header</code> and <code>footer</code> of fixed <code>height</code>,</p>

<p>how do you make the middle content part fill <code>100%</code> of the space in between with the <code>footer</code> fixed to the bottom ?</p>

I am using the following one:
CSS Layout - 100 % height
Min-height
The #container element of this page has a min-height of 100%. That
  way, if the content requires more height than the viewport provides,
  the height of #content forces #container to become longer as well.
  Possible columns in #content can then be visualised with a background
  image on #container; divs are not table cells, and you don't need (or
  want) the physical elements to create such a visual effect. If you're
  not yet convinced; think wobbly lines and gradients instead of
  straight lines and simple color schemes.
Relative positioning
Because #container has a relative position, #footer will always remain
  at its bottom; since the min-height mentioned above does not prevent
  #container from scaling, this will work even if (or rather especially when) #content forces #container to become longer.
Padding-bottom
Since it is no longer in the normal flow, padding-bottom of #content
  now provides the space for the absolute #footer. This padding is
  included in the scrolled height by default, so that the footer will
  never overlap the above content.
Scale the text size a bit or resize your browser window to test this
  layout.
```
```
html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;

    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}

h1 { 
    font:1.5em georgia,serif; 
    margin:0.5em 0;
}

h2 {
    font:1.25em georgia,serif; 
    margin:0 0 0.5em;
}
    h1, h2, a {
        color:orange;
    }

p { 
    line-height:1.5; 
    margin:0 0 1em;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:750px;
    background:#f0f0f0;

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;
}
    div#header p {
        font-style:italic;
        font-size:1.1em;
        margin:0;
    }

div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}
    div#content p {
        text-align:justify;
        padding:0 1em;
    }

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
}
div#footer p {
    padding:1em;
    margin:0;
}
```
```
Works fine for me.