View Full Version : XHTML 1.0, transitional; div height 100%

05-11-2011, 01:30 PM
Hello again.

I am baffled as to how I can create a nested div that fits the height of the parent div.

For example, something like this
<div id="bodycontent" style="width:1024px; background:url(imgs/opaque.png); text-align:left; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:10px;">
<div id="content_side" style="width:200px; height:750px; min-height:100%; background:#000; color:#e6e6e6; margin-right:5px; margin-top:0px; float:left;">
<hr style="color:#ec6224;" />
<hr style="color:#ec6224;" />
<hr style="color:#ec6224;" />
<p>This page has content about you.</p>
<p>Vestibulum ultricies eros at sem aliquet et ultricies massa luctus.</p>
<p>Quisque nec turpis libero. Sed ante enim, suscipit vitae vulputate non, mollis id eros. </p>
<p>Suspendisse ornare nisi sed nibh laoreet gravida. Curabitur scelerisque eleifend ligula, rhoncus venenatis erat varius nec. </p>
<p><br />filler...</p>
<p><br />filler...</p>
<p><br />filler...</p>
<p><br /><br /><br /><br />filler...</p>
</div>I would like for the content_side height to match the height of the parent div, but height:100% and min-height:100% do not seem to work.

So, would anyone here happen to have any useful suggestions?

Thanks in advance!

05-11-2011, 05:48 PM
A height of 100% has no effect unless the parent has a height. Give the 'body content' div a pixel height to see the effect.

It you want both divs to stretch to the full height of the browser then you would need to give the parent div a height of 100%, and the same for body and html.

I would encourage you to create a stylesheet rather than squeezing everything into a style attribute:

<style type="text/css">
html { height: 100%; }
body { height: 100%; }
#bodycontent {
height: 100%;
width: 1024px; /* etc.. */
#content_side {
height: 100%;
</head> Height 100% is discussed here (http://www.tutwow.com/htmlcss/quick-tip-css-100-height/).

05-11-2011, 10:46 PM

I did not think about that beforehand, so I will see what happens when I do that later.

And I do use a css file; I just figured it would be easier to show their elements like that without having to copy more code. http://reaganator.com/comments/cool.gif

05-12-2011, 12:36 AM

Okay, I finally got his sample to work. (Oddly, it did not work on the initial attempt until I converted to XHTML strict. Then I went back to transitional, and it is working all of a sudden.)

I swear... this is more of a pain than it needs to be!