Div height not setting to 100%

AusQB · 05-30-2009, 03:59 AM

I have a fairly basic layout with a left hand side bar for navigation. I've set the height of the side bar to 100% (of the body div) yet it reduces the height to fit the containing div. Within the leftnav div is another div which contains the list.

In other words, I want div#leftnav to fit the height of div#body.

It seems like such a trivial problem but I can't figure it out.

Here is the code, omitting most of the content and irrelevant attributes:

Code:

div#wrap {
	height: auto;
	margin: 10px auto;
	width: 900px;
}

div#header {
	height: 120px;
	width: 100%;
}

div#body {
	height: auto;
	margin-top: 10px;
	width: 100%;
}

div#leftnav {
	float: left;
	height: 100%;
	width: 148px;	
}

div#content {
	float: left;
	height: auto;
	min-height: 600px;
	width: 750px;
}

div#footer {
	float: left;
	height: 60px;
	margin-bottom: 10px;
	margin-top: 10px;
	width: 100%
}

HTML Code:

<body>

    <div id="wrap">
	
	<div id="header"></div>
	
	<div id="body">
	
	    <div id="leftnav"></div>

	    <div id="content"></div>

	</div>
	
	<div id="footer"></div>

    </div>

</body>

EDIT: Ok, I realized that setting the height to 100% will not work if the parent element's height is set to auto. Is there a way around this if I don't want a fixed height for the body div?

conor · 05-30-2009, 10:50 AM

No.

Not with HTML anyway. As far as I know it is possible in DHTML, or you could try jQuery, although I don't know how to do it myself.

jvnderwe · 05-30-2009, 04:08 PM

I hope I understand you correctly - you want to have a sidebar that has different background graphic or color than the content area, and always reaches down to the footer regardless of how much content is actually in the sidebar?

If this is what you are trying to do, you could make a faux column by applying a background graphic to div#body. You could make a 900px wide image (only needs to be a couple pixels high), with a 148px wide bar of color on the left that you want for your sidebar, with just transparent pixels on the right. Set that as the background image for div#body and tell it to repeat vertically.

I hope that is what you are trying to do and that my explanation made sense.

AusQB · 05-31-2009, 02:40 AM

Quote:

Originally Posted by jvnderwe

I hope I understand you correctly - you want to have a sidebar that has different background graphic or color than the content area, and always reaches down to the footer regardless of how much content is actually in the sidebar?

If this is what you are trying to do, you could make a faux column by applying a background graphic to div#body. You could make a 900px wide image (only needs to be a couple pixels high), with a 148px wide bar of color on the left that you want for your sidebar, with just transparent pixels on the right. Set that as the background image for div#body and tell it to repeat vertically.

I hope that is what you are trying to do and that my explanation made sense.

Yeah I think that might be the best option. It just confounds me that height:100% doesn't parse height:auto as an actual value.

adamblan · 05-31-2009, 04:35 AM

Quote:

Originally Posted by conor

Not with HTML anyway. As far as I know it is possible in DHTML, or you could try jQuery, although I don't know how to do it myself.

Yes, javascript provides the most eloquent solution to this problem

AusQB · 05-31-2009, 04:51 AM

Quote:

Originally Posted by adamblan

Yes, javascript provides the most eloquent solution to this problem

Thanks for that. I'm a little lost though, where do I put the call statement?

adamblan · 06-02-2009, 09:07 PM

you can call the <script> tag anywhere in the document, most often in the <head> section, but pages will load faster if you call scripts toward the end of the page, just before closing your <body>

05-30-2009, 03:59 AM	#1
AusQB Silver Member Join Date: Jul 2008 Location: Perth, Australia Posts: 167	Div height not setting to 100% I have a fairly basic layout with a left hand side bar for navigation. I've set the height of the side bar to 100% (of the body div) yet it reduces the height to fit the containing div. Within the leftnav div is another div which contains the list. In other words, I want div#leftnav to fit the height of div#body. It seems like such a trivial problem but I can't figure it out. Here is the code, omitting most of the content and irrelevant attributes: Code: div#wrap { height: auto; margin: 10px auto; width: 900px; } div#header { height: 120px; width: 100%; } div#body { height: auto; margin-top: 10px; width: 100%; } div#leftnav { float: left; height: 100%; width: 148px; } div#content { float: left; height: auto; min-height: 600px; width: 750px; } div#footer { float: left; height: 60px; margin-bottom: 10px; margin-top: 10px; width: 100% } HTML Code: <body> <div id="wrap"> <div id="header"></div> <div id="body"> <div id="leftnav"></div> <div id="content"></div> </div> <div id="footer"></div> </div> </body> EDIT: Ok, I realized that setting the height to 100% will not work if the parent element's height is set to auto. Is there a way around this if I don't want a fixed height for the body div? __________________ RGG Web Designs Last edited by AusQB; 05-30-2009 at 04:13 AM.

05-30-2009, 10:50 AM	#2
conor Gold Member Join Date: Oct 2008 Location: Ireland Posts: 349	No. Not with HTML anyway. As far as I know it is possible in DHTML, or you could try jQuery, although I don't know how to do it myself. __________________ Conor

06-02-2009, 09:07 PM	#7
adamblan Silver Member Join Date: Aug 2008 Location: Lake Tahoe Posts: 235	you can call the <script> tag anywhere in the document, most often in the <head> section, but pages will load faster if you call scripts toward the end of the page, just before closing your <body> __________________ <ablank.us>

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

05-30-2009, 04:08 PM	#3
jvnderwe New Member Join Date: May 2009 Posts: 11	I hope I understand you correctly - you want to have a sidebar that has different background graphic or color than the content area, and always reaches down to the footer regardless of how much content is actually in the sidebar? If this is what you are trying to do, you could make a faux column by applying a background graphic to div#body. You could make a 900px wide image (only needs to be a couple pixels high), with a 148px wide bar of color on the left that you want for your sidebar, with just transparent pixels on the right. Set that as the background image for div#body and tell it to repeat vertically. I hope that is what you are trying to do and that my explanation made sense.