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!)
