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