100% Min Height CSS layout

Question

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

In particular if you have a layout with a header and footer of fixed height,

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

Answer 1

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.

Answer 2

To set a custom height locked to somewhere:

body, html {    height: 100%;  }  #outerbox {    width: 100%;    position: absolute; /* to place it somewhere on the screen */    top: 130px;         /* free space at top */    bottom: 0;          /* makes it lock to the bottom */  }  #innerbox {    width: 100%;    position: absolute;				    min-height: 100% !important; /* browser fill */    height: auto;                /*content fill */  }

<div id="outerbox">    <div id="innerbox"></div>  </div>