Welcome to WebmasterWorld Guest from 54.227.48.147

Forum Moderators: not2easy

Message Too Old, No Replies

Can't figure out how to make inner div 100% height

     
8:50 pm on Oct 28, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 11, 2005
posts: 76
votes: 0


Can anyone suggest a way to fix the following code so that the "content" div extends to the bottom of the container div? I'm sure there must be a simple solution, but I have not been able to find it. Thanks.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test CSS</title>
<style type="text/css">
div.container {
border-left: 10px navy solid;
width: 100%;
height: 100%;
}
div.link {
float: left;
background-color: green;
width: 200px;
height: 100%
}
div.linkbar {
background-color: purple;
color: white;
width: 100%;
}
div.content {
border-left: 10px cyan solid;
margin-left: 200px;
height: 100%;
background-color: yellow;
}
div#footer {
background-color: red;
height: 20px;
width: 100%;
clear: both;
}
</style>
</head>

<body>

<div class="container">
<div class="link">
<div class="linkbar">
Some Links </div>
Link 1<br />
Link 2<br />
Link 3<br />
Link 4<br />
Link 5<br />
Link 6<br />
Link 7<br />
Link 8<br />
</div>
<div class="content">
<h2>Some Content Here</h2>
This is the content.
</div>
</div>
<div id="footer"></div>
</body>
</html>

10:58 pm on Oct 28, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


To get 100% height to do anything on an element, it's direct parent needs a height set explicitly (auto won't work).
Only the root element has a height of the viewport size, so if you seek that height: give html, body, and #container all the height:100%


html, body, #container {
height:100%;
}

good luck!

1:32 pm on Oct 29, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 11, 2005
posts: 76
votes: 0


Thanks swa66,

I was all set to reply that after adding the html {100%} tag, it still wasn't working. I am designing in Expression Web 2, and it was still displaying the same incorrect behavior. Before posting, however, I thought it would be prudent to see how it looked in the various browsers. Happily, it is now displaying correctly in IE and all the Mozilla browsers. Just a reminder of how inconsistent Microsoft programs are from one product to the next.