CODEWITHSUNDEEP
csshtmlheight
Michael Davis
Michael Davis

Reputation: 219

Is it possible to get a div's height to be 100% of an available area?

I have a design that has a left side bar and a main content well on the right. On most pages on the site, the left sidebar is taller than the content well, but for a few pages, the content well is very tall and the sidebar is left floating with no bottom.

I have created a piss poor example of what I'm talking about here:

http://www.pmind.com/staging/pisspoor.html

I remember years ago the answer was to just assign a background image that would fake it, i.e. in my example just make an image that had a green bar down the left side of it and make that the background to the main red div. And I know this is a common want for websites to have areas that span 100% of the browser window, so you can make HTML and BODY be 100%, but in this case, the area is capped by the header and footer so the browser's dimensions aren't a factor, I just want the green div to be the height of it's parent red div. Is this still a pipe dream with CSS2.1 and lower?

Upvotes: 1

Views: 648

Answers (2)

John Hartsock
John Hartsock

Reputation: 86872

Here is a good example of div positioning. Here is a working example http://jsbin.com/izosi3

<div id="header" style="position:absolute; top:0px; left:0px; height:50px; right:0px;">
</div>
<div id="leftnav" style="position:absolute; top:50px; left:0px; bottom:50px; width:150px;">
</div>
<div id="content" style="position:absolute; top:50px; left:150px; bottom:50px; right:0px;">
</div>
<div id="footer" style="position:absolute; height:50px; left:0px; bottom:0px; right:0px;">
</div>

Upvotes: 1

DADU
DADU

Reputation: 7038

You could use Javascript to do the job or you could set a min-height in CSS on the content:

#content {
min-height:500px;
}

Upvotes: 1

Related Questions