CSS value: min-height at 100%

Posted March 25th, 2007 @10:38 am

In the process of developing this site, I ran into a problem with page heights. On several pages, such as the archives and the 404 pages, there is not much content, and because of this, #page (the wrapper div) does not reach the bottom of the window.

Using a few lines of CSS from a discussion on css-discuss, I solved the problem for Firefox. When #page is shorter than the available window height, #page stretches vertically to fill the window.

  1. html, body { height : 100%; }
  2. body { height : 100%; }
  3. html > body { height : 100%; min-height : 100%; }
  4. #page { min-height : 100%; }

I think I could have also used min-height="650px", but I wanted the browser to calculate if #page filled the window and only adjust it the amount needed.

For example, what if the browser window was resized to 500×500px, but min-height was set to 650px? Then, it would be unnecessary for #page to be resized.

Now, I am trying to figure out what is the best way to get this to work in IE. Any ideas?

Comments feed for this article

2 responses to “CSS value: min-height at 100%”

  1. christopher says // March 30th, 2007

    footerStickAlt works well in all major browsers.

  2. Nick says // March 31st, 2007

    Thanks for the link. footerStickAlt appears to be intended for what I’m trying to do.

    I was unable to get it to work; I think the problem may be that my div structure is a little confusing. I’ll take another look when I get a chance.

Leave a Reply