CSS <div> height 100%

[thesprucegoose]

Hey all,

I'm trying to make a vertical rule with a div. For some reason, height:100%; isn't working. Anybody know how to make the div span the entire height of the page and scale via browser resize?


CSS:
#blue-rule {
background:transparent url(../images/blue_rule.png) repeat-y scroll 0 0;
float:left;
height:100%;
margin-left:-60px;
min-height:1718px;
width:1px;}

HTML:
</div> <!--NAV-->
<div id="blue-rule">&nbsp;</div>
<div id="content" class="clearfix">




Any feedback would be helpful

Thanks forum!

--thesprucegoose

[DaiLaughing]

Try making the body height also 100%.

[thesprucegoose]

Thank you for the response.

I neglected to mention that the body height is already 100% (to make my sticky footer work).

However, I appreciate the response :)

[DaiLaughing]

If you position it absolute it will work but I'm not sure if that will fit your need.

[Andyram2k]

Hi thesprucegoose,
This should hopefully correct your problem:

HTML {
MIN-HEIGHT: 100%; HEIGHT: 100%
}
BODY {
MIN-HEIGHT: 100%; HEIGHT: 100%
}
HTML BODY {
MIN-HEIGHT: 100%; HEIGHT: 100%
}
#yourdiv {
height: 100%;
}

[DaiLaughing]

I don't think you need the third style but nice one. I knew there was a reason I hate CSS and there it is.