How to position the footer at the very bottom of the page

Positioning the footer at the bottom of the page when the window's height is greater than the page content's height.

Added on 17 Jun 2008

Scenarios:

Scenario Summary:

When the page's content does not fill the entire browser window's height the footer ends up well above the bottom of the page.

Scenario Details:

Added on 17 Jun 2008

Solution Summary:

Place all content in a single wrapper table.

Solution Details:

I know all the purists will gripe about my recommendation as tables are intended for displaying tabular data and not for layout (or so they will say). But, I have found that using DIVS to layout my pages is never as accurate as using Tables. Furthermore, different browsers interpret the divs differently, whereas table attributes seem to be read the same way across most or all browsers. It is simply too time-consuming and frustrating to use DIVS.

Take for instance one recommendation I read in a forum:

1. Set the body height to 100%

2. Put the content of the page (except for the footer) into a div that also sets its height attribute to 100%

3. Put the footer in a second div after the first div

html, body {
    height:100%;
}
#content {
    min-height:100%;
}
* html #content {
    height:100%;
}
#footer {
    height:50px; /* height of the footer */
    margin-top:-50px;
}

<body>
<div id="content">
Enter content here
</div>
<div id="footer">
Footer positioned at the bottom of the page
</div>
</body>

Firstly, “min-height” had the same effect whether it was present or not – i.e., none whatsoever! Secondly, it was all well and good, until I looked at it in Firefox on a page that was longer than the window height and saw that the footer encroaching in on the content by 50 pixes.

You can try this solution and see if you have better luck. Other solutions I’ve found had a similar effect: It would seem to work until I looked at the page in a different browser or until I added or removed content. In the end, I always end up with the same workaround solution:

1. Place the all the content of the page in an outer-table (there can be other nested tables if you like),

2. Set the body’s height to 100% as well as the outer table’s height to 100%,

3. Create three rows (one cell each): First one for the header, second for the content, and the third for the footer

4. Set the content row’s height to 100%.

<body height="100%">
<table height="100%">
     <tr>
          <td>Header</td>
     </tr>
     <tr>
          <td height="100%" valign="top">
               Content
          </td>
     </tr>
     <tr>
          <td>Footer</td>
     </tr>
</table>

Simple!

Was this solution useful? Yes No

Added on 17 Jun 2008

Rating: