100% height content + (header div and padding)

leeming · July 28, 2008

I have been struggling with this problem since i first started creating this layout (ages ago, but for development reasons, i stuck static width/heights in, just to work on my screen).

I have searched google numerous times, but with no avail, as sites go on about something which is irrelevant to what im wanting (so maybe vague/bad use of keywords in search). any way i did a quick search on here, and any help given, does not seem to fix up my layout.

My first basic problem is having a side navigation bar to fill the height of the screen, plus the header which is a static height. All this without creating scroll bars for the browser

My second problem, which may be more or less the same as the above (miss-understanding of css), having a 100% height which includes padding.

Link: http://dlym.net/testing/css_help.php

Source (html)

<html>
<body>
<div id="container">
<div id="top">header</div>
<div id="sidebar">laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br></div>
<div id="content">
	<div id="childcontainer">
		<div id="paddedbox">
			<div id="test1">title</div>
			<div id="test2">
				<div id="myElement"><a onclick="">main content</a></div>
			</div>
		</div>
	</div>	
</div>
</div>

</div>
</body></html>

CSS


html, body
{
margin:0px;
padding:0px;
width:100%;
height:100%;
}

#container
{
width: 100%;

height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/

max-height:100%; /* real browsers */

background-color:grey;
position: relative;
}

#top
{
width: 100%;
height: 100px;
background-color:pink;	
}

#main
{
width:100%;
height:100%;
}

#sidebar
{
background-color:red;
width: 150px;
height: 100%;
float: left;
}

#content
{
background-color:blue;

overflow:hidden;	
padding:10px;	
	height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/

max-height:100%; /* real browsers */
}

#childcontainer
{

background-color:white;
padding:10px;
}
#paddedbox
{
background-color:green;
margin-bottom:0px;
margin-top:0px;
	overflow:hidden;
}

#test1
{
width:100%;
height:20px;
background-color:yellow;	
}
#test2
{
width:100%;
height:100%;
background-color:lime;
}

The above is a simplified version of my site's layout, but they are the core div containers which i am trying to get positioned correctly.

I seriously will thank any one who gives any help which leads me to fix this problem, as i am not too skilled with css, and this has been troubling me for some time. Thank you

Sign In

100% height content + (header div and padding)

Recommended Posts

leeming

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information