Welcome to WebmasterWorld Guest from 54.224.91.58

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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members