XHTML1.1 - Stretch DIV to page height

[primexx]

Ok, you know how normally DIVs are only as tall as the content in them?

Is there any way to make a DIV stretch to the end of the page when there are not as much content? Yet have it stretch to the height of the content when the content exceeds the height of the page?

Please note that this is XHTML 1.1, tableless, and fluid design.

Thanks.

[gsnedders]

CSS:
html, body, div {
height: 100%;
}

[_Aerospace_Eng_]

You would probably want to use min-height and use an IE hack to similar minheight. Check out this example http://bonrouge.com/hcf-fluid.php

[primexx]

i'll try the CSS part...

as for min-height it does not work as people use different resolutions.

edit: doing the body,html,div all 100% does make it go to the end of page, however as soon as the content stretches to longer than 1 page, it doesnt show the border anymore.

using min-height does not work either.

i'll try something i just thought of. in the mean time if anyone have any ingenious suggestions, i'll be eager to hear it. thx.

[Graft-Creative]

html, body {
height: 100%;
}

div#whatever {
min-height: 100%;
}

* html div#whatever {
height: 100%;
}


i think (hey it's late!) :)

Gary

[primexx]

actually, using min height doesnt even work in firefox.

I came up with a work around though...

html, body 100% height

.the_first_div 100% height

.the_second_div dont define height.

define everything in the first div, and put the second div inside the first div

having left and right margins set to -1px, or -something pixels, depending on how thick the boarder is. the top and bottom borders is all up to what you want.

seems to work like a charm. I'll post if theres any problems with this setup.

edit: oh forgot, define the exact same borders as the first div, for the second div.