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