The main problem with percentage based height, especially in IE, is that every single parent element all the way up to the root html node must have a defined height in order for this to work. This includes the html, body, form, and any master page placeholder tags between the form and the object you want to size with percentages.
Keep in mind that any elements that add to the height of the entire page will need to be sized, and subtracted from the 100% height. This can cause problems in IE, because there doesn't seem to be a way to define absolute height on some elements and percentages on others at the same time. In mozilla, you can use height:auto.
The TitleBar property of the WebImageViewer and WebThumbnailViewer controls will add a line-height amount of space to the height of both of these controls, so if you're using precentage based height, it's recommended that you don't use these properties. You can put these labels in the outer table instead.
Here is an example of what I've used for percentage based height:
/* styles */
html, body, form {
margin:0px;
padding:0px;
height:100%;
width:100%;
overflow:hidden; /* makes the vertical scroll bar go away in IE */
}
.mainTable {
width:100%;
height:100%;
}
.commandBar {
width:100%;
height:10%;
background-color: darkred;
color: white;
}
.thumbsContainer {
height:90%;
}
.viewerContainer {
width:100%;
height:90%;
}
<!-- HTML -->
<body>
<form id="form1" runat="server">
<table class="mainTable" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="commandBar" colspan="2">
... commands / buttons / etc ...
</td>
</tr>
<tr>
<td class="thumbsContainer" valign="top">
<cc1:webthumbnailviewer id="WebThumbnailViewer1" runat="server" width="200px" height="100%" viewerid="WebImageViewer1" thumbsize="160, 120" BackColor="darkblue"></cc1:webthumbnailviewer>
</td>
<td class="viewerContainer" valign="top">
<cc1:webimageviewer id="WebImageViewer1" runat="server" height="100%" width="100%" BackColor="darkorange" />
</td>
</tr>
</table>
</form>
</body>
David Cilley
My AJAX Imaging BlogAtalasoft Development Team