CSS - fill browser height

Myxomatosis · 08-03-2009 11:25AM #1

I have made a layout which will expand in height with whatever amount of dynamic content is outputted to the #content div, and/or #sidebar div.

What I want is for the layout to fill the height of the browsers window even when there is not enough content inside of it to push it down that far, and then have the ability to expand once the content increases.

I'd put the HTML and CSS up here but there is also a background image which creates the illusion of a sidebar so here are all (3) of the files:

http://rapidshare.com/files/206743222/layout.rar

IRLConor · 08-03-2009 11:15PM

The following has done it for me in the past.

[HTML]
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
}
</style>
[/HTML]

I can't remember how it performs cross-browser though. I just tested it now in Firefox 3 and Safari 3.2. No idea how it performs in IE.

conordarcy · 09-03-2009 04:18PM

maybe this'll help

http://conordarcy.com/how-to-stick-a-footer-to-the-bottom-with-css/

there's a link to a completed zip file
http://conordarcy.com/css-footer-solution.zip

CSS - fill browser height

Comments