problem with height:100%;

curt22 · September 2, 2007

I'm working on a simple page with css and xhtml, but I can't get #contents to fill the whole page. I tried adding body {height:100%;} and #container{ height:100%;}, but it still does not work.

Xhtml

<!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>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" />
</head>

<body>
<div id="container">
	 <div id="sitename">
	 			Sitename
	 </div>
	 <div id="navigation">
	 			<div id="mainnavigation">
	 					<h3>Main Navigation</h3>
	 					<ul>
			 			<li><a href="#">Link</a></li>
			 			<li><a href="#">Link</a></li>
			 			<li><a href="#">Link</a></li>
			 			<li><a href="#">Link</a></li>
			 			<li><a href="#">Link</a></li>
			 			<li><a href="#">Link</a></li>
			 			</ul>

				</div>

				<div class="latest">
						 <h3> Latest News</h3>
   						 News Goes here.News Goes here.News Goes here.News Goes here.News Goes here.News Goes here.News Goes here.News Goes here.News Goes here.News Goes here.News Goes here.News Goes here.News Goes here.
				</div>
				<div class="links">
						 <h3>Links</h3>
						 <ul>
						 <li><a href="#">Link</a></li>
						 <li><a href="#">Link</a></li>
						 <li><a href="#">Link</a></li>
						 <li><a href="#">Link</a></li>
						 <li><a href="#">Link</a></li>
						 <li><a href="#">Link</a></li>
						 </ul>
				</div>

		</div>
		<div id="contentheader">
				 <h2>Content</h2>
				 </div>
		<div id="contents">
		Contents go here.
		</div>

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

Css

/* CSS Document */
body {
font-family:Arial, Helvetica, sans-serif;
height:100%;
color:#DA8750;


}

a:link{
color:#DA8750;
text-decoration: none;
}

a:visited{
color: #DA8750;
text-decoration: none;
}

a:hover{
color: #DA8750;
text-decoration: underline;
}

#container{
height:100%;
width:100%;
margin: 0;
}
#sitename{
background-color:#006600;
margin: 0;
padding: 10px 0 10px 10px;
border-bottom: 1px solid #ccc;
font-size: 36px;
font-weight:bold;

}

#navigation{
float:left;
width:175px;
background-color: #006600;
margin: 0px;
border-right: 1px solid #ccc;
}

#navigation ul a:link, #navBar ul a:visited {
display: block;
}


#navigation ul {
list-style: none; margin: 0; padding: 0;
}

#navigation li {
border-bottom: 1px solid #EEE;	
}

html>body #navigation li {
border-bottom: none;
}

#mainnavigation{
margin: 0px;
padding: 0px;
border-bottom: 1px solid #cccccc;
font-size: 90%;

}

#mainnavigation h3{
padding: 0px 0px 0px 0px;
margin:7px 0 7px 0;
}

#mainnavigation a {
display: block;

padding: 2px 0px 2px 10px;

}

#mainnavigation a:hover{
background-color: #DA8750;
color:#006600;

}

.latest{
float:left;
margin: 0px;
padding: 0px 0px 0px 0px;
font-size: 90%;
border-bottom:1px solid #cccccc;

}
.latest h3{
margin:7px 0 7px 0;
padding:0 0 0 0;
}

.links{
float:left;
margin: 0px;
padding: 0px 0px 0px 0px;
font-size: 90%;


}
.links h3{
margin:7px 0 7px 0;
padding:0 0 0 0;
}


#contentheader
{
margin: 0px 0px 0px 5px;
background-color:#006600;
vertical-align:top;

}

#contentheader h2
{
text-align:center;
margin: 0;
}
#contents
{
margin: 0px 0px 0px 5px;
background-color:#006600;
vertical-align:top;height:100%;

}

moberemk · September 2, 2007

Try using a background on the body tag if you want something to fill the entire vertical space.

Sign In

problem with height:100%;

Recommended Posts

curt22

Link to comment

Share on other sites

moberemk

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information