ansaurus

Question

Answer 1

+1 A:

I can see no need to set height of those elements to 100%. you are saying, "I have a sidebar DIV that i want to expand vertically to match its containing div." Do you mean you want the height of the sidebar to match the height of the #content DIV? In that case, consider "faux columns" method, described here. Another way would be to calculate the height of the #content div with Javascript, and applythat height to #sidebar.

To properly clear floats, the clearing element should be placed AFTER the floating element, not inside of it. One useful trick that I often use myself is pseudo-selector :AFTER. Suppose, you have to clear #content. Then:

#content:after
{
   content: ".";
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
}

This will place an invisible element after your element, and it will clear your element.

Andrey Vlasov 2009-12-27 17:47:02

faux columns might work, but thats kinda cheating, not that that's bad, but i would like to do it traditionally. The wrapper, content, and sidebar never expand past about 1000px (which is really the issue) so the JS thing wouldnt work. The sidebar IS the same height as #content, but they are both stunted for some reason.

Douglas 2009-12-27 18:58:05

oh, and for height:100%; to work, the parent must have a set height, so that is the reason behind that,

Douglas 2009-12-27 18:59:55

Answer 2

+2 A:

BigName 2009-12-28 13:42:29

interesting, i would think min-height would work, but on second thought, i guess it isn't really a set height.

Douglas 2009-12-29 13:02:26

Answer 3

A:

To have a div match the height of its container, you can use positioning:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
             "http://www.w3.org/TR/html4/strict.dtd"&gt;
 <html>    
 <head>
 <style>
 #wrapper{position:absolute;top:0px;right:0px;bottom:0px;left:0px}
 #footer{position:absolute;height:100px;right:0px;bottom:0px;left:0px;background:green}
 #sidebar{position:absolute;width:200px;top:0px;bottom:100px;left:0px;background:blue}
 #content{position:absolute;top:0px;right:0px;bottom:100px;left:200px;background:red}
 </style>
 </head>
 <body>
 <div id="wrapper">
   <div id="footer">
   </div>
   <div id="sidebar">
   </div>
   <div id="content">
   </div>
 </div>
 </body>
 </html>

Alsciende 2009-12-29 09:40:06

Answer 4

A:

from what I can tell its based on the float:left/right remove that and it will adjust

MindsMonk 2010-08-05 13:31:09

ansaurus

tags:

views:

answers:

CSS div height won't expand

related questions