Jump to content

height: 100% problem - I'm getting 100% + height of contained divs


Recommended Posts

Hi all :)

 

Have a look at this

 

http://wuhtzu.dk/sandbox/forumpost/height100p/test.html

 

The above is a div (#container, red border) holding two other nested divs (#header, green border and #content, blue border). What I want is for the height of #header and #content to sum up to the height of the #container. Right now, as you can see, the #content div is sticking out the bottom of the #container div. How much is it sticking out I hear you ask - it's sticking out what ever #header occupies. So when #header is 200px in height the #content div is sticking out 200px.

 

How can I prevent this (or just obtain the effect I'm after)?

 

I know elements can't know about other heights than their own. So if the window is 900px high at time of rendering, then #container gets height=900px and since #container is the parent of #content, #content too gets height=900px, even though #header occupies some space...

 

But It must be possible to correct this? Applying negative margins and such doesn't seem to have an effect.

 

Thanks guys!

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<!-- Title -->
	<title>100% height test...</title>

	<!-- Meta information -->
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<!-- Styles -->		
	<link href="style.css" rel="stylesheet" type="text/css"  />

</head>

<body>

	<div id="container">
		<div id="header">
			<p>HEADER</p>
		</div>

		<div id="content">

			<p>CONTENT</p>
		</div>
	</div>

</body>

</html>

 

html, body, p, div {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

#container {
width: 600px;
height: 100%;
border-left: 3px solid #FF0000;
border-right: 3px solid #FF0000;
margin: auto;
background: #FFFFF1;
}

#header {
height: 200px;
border-left: 3px solid #00FF00;
border-right: 3px solid #00FF00;
background: #FFF1FF;
}

#content {
height: 100%;
width: 400px;
border-left: 3px solid #0000FF;
border-right: 3px solid #0000FF;
margin-bottom: -200px;
margin-left: auto;
margin-right: auto;
background: #F1FFFF;
}

I'm trying to do so because in reality the #content div is to be floated left and another div, say #content2, is to be floated right so I have two columns. The columns need to be of different background color, so that's why I need both #content and #content2 to go all the way to the bottom of the page... else the background color of something else (maybe #container, or even body) might be visible through.

 

I have tried alot of things, but since I need the page centered it seem that I need a div to contain all other divs....

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.