Caveatrob Caveatrob - 6 months ago 16
CSS Question

CSS to make HTML page footer stay at bottom of the page with a minimum height

I had the following page (deadlink:

http://www.workingstorage.com/Sample.htm
) that has a footer that I can't make sit at the bottom of the page.

The CSS is inherited and befuddles me; I can't seem to change it properly to put a minimum height on the content or make the footer go to the bottom.

Answer

There is an excellent footer tutorial here. (Alternative link here).

The demo page is here.

The basic premise is that the main body page is stretched to a 100% of the page. With a min-height of 100% too.

The footer is then given the following rules:

#footer {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
}
Comments