Getting a Div to stretch the whole height of a page

[Zenax]

How do I make it so that a div stretches the entire height of the page, no matter the length of content etc.

So someone could have a story that is 50,0000 words long (just an example, no one would really have that length on a website) and it would stretch forever!!

Any help recieved, I am grateful of!

Regards,
Zenax

P.S This happens in all browsers, FF 2.0, IE7, IE6

Can't figure it out for the life of me:

CSS Code

body, html
{
background-color: #6C6C6C;
margin: 0px;
padding: 0px;
height: 100%;
}
hr
{
background-color: #818181;
color: #818181;
}
a:link, a:visited
{
color: #FFFF00;
font-family: "Bookman Old Style";
font-size: 12px;
text-decoration: none;
padding-left:5px;
}
a:hover
{
color: #FFFFFF;
padding-left:5px;
}
#wrapper
{
background-image:url(../img/wrapper_bg.gif);
background-repeat: repeat-y;
width: 620px;
height: 100%;
padding-top: 10px;
}
.header
{
font-family:Arial, Helvetica, sans-serif;
}
.mainheader
{
font-size: 18px;
color: #6C6C6C;
font-family:Arial, Helvetica, sans-serif;
font-weight: bolder;
}
#contentwrapper
{
width: 350px;
font-family: "Bookman Old Style";
font-size: 12px;
margin-left: 200px;
position: absolute;
}
.content
{
font-family:"Bookman Old Style";
font-size:12px;
}
#navigationwrapper
{
background-color: #6C6C6C;
color: #FFFFFF;
font-family: "Bookman Old Style";
font-size: 12px;
width: 160px;
margin-left: 30px;
position: absolute;
margin-top: 20px;
}
.navigation
{
font-family:"Bookman Old Style";
font-size:12px;
color: #FFFFFF;
padding: 5px;
width: 150px;
}
.login
{
background-color: #FFFFFF;
color: #000000;
border: 1px solid #FFFFFF;
font-size: 11px;
padding: 2px;
}
.designedby
{
color: #FFFF00;
font-size: 9px;
font-family: Tahoma;
padding-left: 10px;
}
.logo
{
width: 100%;
border: 0px;
margin-left: 30px;
}
img
{
border: 0px;
}
form
{
margin-left: 5px;
}

 

[oab]

min-height 100%;

i think it only works on firefox though.

 

[Cubeform]

min-height 100%;

i think it only works on firefox though.

It doesn't work in Firefox. I've tried that declaration many, many times.

Now, I did some Google searching (using "Getting a Div to stretch the whole height of a page" :drool: ), and this is what I found:

html, body {
  height: 100%; margin: 0px;
}

div#wrapper{ 
  min-height: 100%;
  height: auto;
  _height: 100%; /* IE Hack */
}

I've included a hack for Internet Explorer there (see the underscore) since it doesn't support min-height. I don't like hacks myself, so you can move it to an IE conditional statement:

<!--[if lte IE 6]>
<style>
/* IE7 supports min-height, I think*/
div#wrapper{ 
  height: 100%; 
}</style>
<![endif]-->

 

[Zenax]

now the bg stretches the height of the logo only

 

[remie]

hmm mayby for the next time use google

 

[Derek]

You mean like a resize code thats what i usally use