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.
html, body { height : 100%; }body { height : 100%; }html > body { height : 100%; min-height : 100%; }#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?