how to define div or table cell height depending on the height of other divs or cells

Posted by John on Stack Overflow See other posts from Stack Overflow or by John
Published on 2010-04-25T21:25:55Z Indexed on 2010/04/25 21:33 UTC
Read the original article Hit count: 204

Filed under:

I want to have a web page that contains 3 parts: A header at the top of the page , a footer (both of which having specific height in px)and the main part of the page which should be a div or table cell with the appropriate height attribute in order to take all the available space between them. I want the page to take 100% of the browser window height, trying to avoid scrollbars. The problems I have are the following:

USING DIVs

a) If I set the maindiv height to 100%, the page overflows and I get a vertical scrolbar. (the maindiv's height is set to the 100% of the browser window)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
<!--
body, html{
    height: 100%;
    max-height:100%;
    width: 100%;
    margin:0;
    padding:0;
}
div{padding:0;margin:0;}
#containerdiv{height:100%;width:100%;background-color:#FF9;border:0;}
#headerdiv{height:150px;width:100%;background-color:#0F0;border:0;}
#footerdiv{height:50px;width:100%;background-color:#00F;border:0; }
#maindiv{
    background-color:#F00;
    height:100%;
}
div{border:#000 medium solid;border:0;}
</style>
<body>
<div id="containerdiv">
<div id="headerdiv">headerdiv</div>
<div id="maindiv">maindiv</div>
<div id="footerdiv">footerdiv</div>
</div>
</body>
</html>

b) If I set the maindiv height to auto, the maindiv height is depending on it's content, which is not what I want.

USING tables

a) If I set the main cell height to 100% it works fine with Firefox but in Internet Explorer 8 I get a vertical scrollbar (you can use the next code block using th style="height:100%" instead of "auto" to see this.)

b) If I set the main cell to auto it seems to be working both in IE and FF but then I have the problem that anything I put inside the maincell (table or div) cannot get maincell's full height in IE.

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
<!--
body, html, table{
    height: 100%;
    width: 100%;
    margin:0;
    padding:0;
}
table{border:#000 0px solid}
</style>
<body>
<table style="background:#063"  cellpadding="0" cellspacing="0" border="0">
<tr><th style="height:150px;background-color:#FF0"></th></tr>
   <tr>
    <th style="height:auto"><table style="background:#0FF;" cellpadding="0" cellspacing="0" border="0"><tr><th style="height:auto">nested cell</th></tr></table>
    </th>
  </tr>
  <tr><th style="height:50px;background-color:#FF0"></th></tr>
</table>
</body>
</html>

</html>

Any ideas? Maybe there is an easier way to define the size of the main part of the page in px using javascript? (my javascript skills are pretty poor so any help with this is welcome!)

Developer IT