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-heightwas 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?