Div height not setting to 100%

AusQB

AusQB

New Member
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: 
<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?
 
Last edited:
conor

conor

New Member
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.
 
J

jvnderwe

New Member
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

AusQB

New Member
jvnderwe said:
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.
Click to expand...

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

adamblan

New Member
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>
 
You must log in or register to reply here.
Top