PDA

View Full Version : height:100%; = height greater than 100%

jussa
08-16-2006, 02:33 AM
ok, so heres my table html...

<table style="border:0px;width:100%;height:100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:top;width:100%"><UIControl:UIHeader runat="server" ID="UIHeader" /></td>
</tr>
<tr>
<td style="vertical-align:top;width:100%"><UIControl:UISubMenu runat="server" ID="UISubMenu" /></td>
</tr>
<tr>
<td style="width:100%;height:100%;vertical-align:top;background-color:#666666;">
hihi
</td>
</tr>
</table>

my body is formatted with the follow css

html,body
{
margin:0px;background-color:#FAFAFA;height:100%;
}

what i was expecting was the "hihi" cell to take up the remainder of the page, instead, it has scrollbars, that when u scroll to the bottom, its looks like only the "hihi" cell is there, what i want is for hihi cell to take up the remainder of the height left over from the two rows above it, so that the default is there is no initial scroll bars, and i dont want to use the overflow-y:hidden; because some pages will need to scroll, others wont...

i guess what im going for is a menu on the left hand side that will reach the bottom of the page, scrollbars or no scrollbars..


Thanks, Justin
_Aerospace_Eng_
08-16-2006, 03:05 AM
Try this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html,body
{
margin:0;padding:0;background-color:#FAFAFA;height:100%;
}
#mainTable {
width:100%;
height:100%;
}
#mainTable td {
vertical-align:top;
}
</style>
</head>
<body>
<table id="mainTable" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><UIControl:UIHeader runat="server" ID="UIHeader" /></td>
</tr>
<tr>
<td><UIControl:UISubMenu runat="server" ID="UISubMenu" /></td>
</tr>
<tr>
<td> hihi </td>
</tr>
</table>
</body>
</html>

Reason it was creating the scrollbars is because it was going 100% height of its container in this case the table's height.
jussa
08-16-2006, 04:02 AM
Try this
Reason it was creating the scrollbars is because it was going 100% height of its container in this case the table's height.

thanks for your reply but i get a huge space between the
<tr>
<td><UIControl:UIHeader runat="server" ID="UIHeader" /></td>
</tr>
row and the
<tr>
<td><UIControl:UISubMenu runat="server" ID="UISubMenu" /></td>
</tr> row. they need to be one on top of the other, and then the "hihi" cell take up the rest of the page height...
jussa
08-16-2006, 09:40 AM
hey guys thanks for the help but ive decided to go "Web 2.0"...divs and css :P

wish me luck