Solved
Scrollable div with height=100%
Posted on 2002-03-12
I try to make a page that will have a long table, and a title above the table, and I want the table to be scrollable WITHOUT scrolling the title. In other ways, I want a fix title and a scrollable table. the way I see it I can use either frames or scrollable DIVs. I preffer scrollable because this entire page is already in two sets of frameset. SO, the problem is, that if I set a fixed height to the DIV, everything is fine, BUT if a set the DIV height to 100% and the top to be 22px, the DIV spreads itself to the entire size of the frame but because it starts 22px form the top, it overflows 22px from the bottom, so the end of the scrollbar is unreachable.
here is the code: (open it in browser, and make the window smaller then the table - which I made shorter for the question - then you'll see the problem)
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Asset List</title>
<link rel="stylesheet" href="/XmpieSite/Utils/mainstyle.css" type="text/css">
<SCRIPT language="JavaScript" SRC="/Utils/XMPiEScripts.js">
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" >
<div id="Buttons" style="position:absolute;top:0;overflow-X:hidden;overflow-y:hidden;width:100%;height:22;z-index:1">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor=#003399>
<td nowrap class="sectionHead" valign="middle"> Campaign Assets</td>
<td nowrap align="right" valign="middle">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('openbtn','','../../images/open-over.gif',1)"><img alt="Open Asset" name="openbtn" border="0" src="../../images/open.gif" width="75" height="21" onClick="AssetOpen.submit();"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('deletebtn','','../../images/delete-over.gif',1)"><img alt="Delete Asset" name="deletebtn" border="0" src="../../images/delete.gif" width="75" height="21" onClick="confirmFormSubmition(AssetDelete,'Asset')"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('newbtn','','../../images/new-over.gif',1)"><img alt="New Asset" name="newbtn" border="0" src="../../images/new.gif" width="75" height="21" onClick="AssetNew.submit();"></a></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="tableDiv" style="position:absolute;top:22;overflow-X:visible;overflow-y:auto;width:100%;height:100%;">
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td nowrap width="24" align="center"> </td>
<td nowrap class="listHeader"><img src="../../images/sort.gif" width="16" height="16" align="absmiddle"><a href="#">Asset</a></td>
<!--<td nowrap class="listHeader"><img src="../../images/sort-no.gif" width="16" height="16" align="absmiddle"><a href="#">Type</a></td>
<td nowrap class="listHeader"><img src="../../images/sort-no.gif" width="16" height="16" align="absmiddle"><a href="#">Size</a></td>
<td nowrap class="listHeader"><img src="../../images/sort-no.gif" width="16" height="16" align="absmiddle"><a href="#">Upload Date</a></td> -->
</tr>
<tr>
<td nowrap width="24" align="center" class="listtext"><img src="../../images/nodes/listicons/unknown.gif" width="16" height="16"></td>
<td nowrap class="listtext"><a href="javascript:setAssetDetails(1,'bouquet1.jpg','//ZVIKA/XMPiEData/1/3/assets//bouquet1.jpg', AssetOpen, AssetSelect)" ondblclick="setAssetDetails(1,'bouquet1.jpg','//ZVIKA/XMPiEData/1/3/assets//bouquet1.jpg', AssetOpen, AssetSelect)">bouquet1.jpg</a></td>
<!--<td nowrap class="listtext"><a href="#" target="ComponentDetails" onClick="setAssetDetails(1,'bouquet1.jpg','//ZVIKA/XMPiEData/1/3/assets//bouquet1.jpg')">bouquet1.jpg</a></td>
<td nowrap class="listtext">JPEG Image</td>
<td nowrap class="listtext">145kb</td>
<td nowrap class="listtext">07-Jul-2001 10:32</td> -->
</tr>
<tr>
<td nowrap width="24" align="center" class="listtext"><img src="../../images/nodes/listicons/unknown.gif" width="16" height="16"></td>
<td nowrap class="listtext"><a href="javascript:setAssetDetails(2,'bouquet2.jpg','//ZVIKA/XMPiEData/1/3/assets//bouquet2.jpg', AssetOpen, AssetSelect)" ondblclick="setAssetDetails(2,'bouquet2.jpg','//ZVIKA/XMPiEData/1/3/assets//bouquet2.jpg', AssetOpen, AssetSelect)">bouquet2.jpg</a></td>
<!--<td nowrap class="listtext"><a href="#" target="ComponentDetails" onClick="setAssetDetails(2,'bouquet2.jpg','//ZVIKA/XMPiEData/1/3/assets//bouquet2.jpg')">bouquet2.jpg</a></td>
<td nowrap class="listtext">JPEG Image</td>
<td nowrap class="listtext">145kb</td>
<td nowrap class="listtext">07-Jul-2001 10:32</td> -->
</tr>
<tr>
<td nowrap width="24" align="center" class="listtext"><img src="../../images/nodes/listicons/unknown.gif" width="16" height="16"></td>
<td nowrap class="listtext"><a href="javascript:setAssetDetails(3,'bouquet3.jpg','//ZVIKA/XMPiEData/1/3/assets//bouquet3.jpg', AssetOpen, AssetSelect)" ondblclick="setAssetDetails(3,'bouquet3.jpg','//ZVIKA/XMPiEData/1/3/assets//bouquet3.jpg', AssetOpen, AssetSelect)">bouquet3.jpg</a></td>
<!--<td nowrap class="listtext"><a href="#" target="ComponentDetails" onClick="setAssetDetails(3,'bouquet3.jpg','//ZVIKA/XMPiEData/1/3/assets//bouquet3.jpg')">bouquet3.jpg</a></td>
<td nowrap class="listtext">JPEG Image</td>
<td nowrap class="listtext">145kb</td>
<td nowrap class="listtext">07-Jul-2001 10:32</td> -->
</tr>
<tr>
<td nowrap width="24" align="center" class="listtext"><img src="../../images/nodes/listicons/unknown.gif" width="16" height="16"></td>
<td nowrap class="listtext"><a href="javascript:setAssetDetails(4,'bouquet4.jpg','//ZVIKA/XMPiEData/1/3/assets//bouquet4.jpg', AssetOpen, AssetSelect)" ondblclick="setAssetDetails(4,'bouquet4.jpg','//ZVIKA/XMPiEData/1/3/assets//bouquet4.jpg', AssetOpen, AssetSelect)">bouquet4.jpg</a></td>
<!--<td nowrap class="listtext"><a href="#" target="ComponentDetails" onClick="setAssetDetails(4,'bouquet4.jpg','//ZVIKA/XMPiEData/1/3/assets//bouquet4.jpg')">bouquet4.jpg</a></td>
<td nowrap class="listtext">JPEG Image</td>
<td nowrap class="listtext">145kb</td>
<td nowrap class="listtext">07-Jul-2001 10:32</td> -->
</tr>
<tr>
<td nowrap width="24" align="center" class="listtext"><img src="../../images/nodes/listicons/unknown.gif" width="16" height="16"></td>
<td nowrap class="listtext"><a href="javascript:setAssetDetails(5,'bouquet5.jpg','//ZVIKA/XMPiEData/1/3/assets//bouquet5.jpg', AssetOpen, AssetSelect)" ondblclick="setAssetDetails(5,'bouquet5.jpg','//ZVIKA/XMPiEData/1/3/assets//bouquet5.jpg', AssetOpen, AssetSelect)">bouquet5.jpg</a></td>
<!--<td nowrap class="listtext"><a href="#" target="ComponentDetails" onClick="setAssetDetails(5,'bouquet5.jpg','//ZVIKA/XMPiEData/1/3/assets//bouquet5.jpg')">bouquet5.jpg</a></td>
<td nowrap class="listtext">JPEG Image</td>
<td nowrap class="listtext">145kb</td>
<td nowrap class="listtext">07-Jul-2001 10:32</td> -->
</tr>
<tr>
<td nowrap width="24" align="center" class="listtext"><img src="../../images/nodes/listicons/unknown.gif" width="16" height="16"></td>
<td nowrap class="listtext"><a href="javascript:setAssetDetails(6,'bouquet6.jpg','//ZVIKA/XMPiEData/1/3/assets//bouquet6.jpg', AssetOpen, AssetSelect)" ondblclick="setAssetDetails(6,'bouquet6.jpg','//ZVIKA/XMPiEData/1/3/assets//bouquet6.jpg', AssetOpen, AssetSelect)">bouquet6.jpg</a></td>
<!--<td nowrap class="listtext"><a href="#" target="ComponentDetails" onClick="setAssetDetails(6,'bouquet6.jpg','//ZVIKA/XMPiEData/1/3/assets//bouquet6.jpg')">bouquet6.jpg</a></td>
<td nowrap class="listtext">JPEG Image</td>
<td nowrap class="listtext">145kb</td>
<td nowrap class="listtext">07-Jul-2001 10:32</td> -->
</tr>
<tr>
<td nowrap width="24" align="center" class="listtext"><img src="../../images/nodes/listicons/unknown.gif" width="16" height="16"></td>
<td nowrap class="listtext"><a href="javascript:setAssetDetails(7,'bouquet7.jpg','//ZVIKA/XMPiEData/1/3/assets//bouquet7.jpg', AssetOpen, AssetSelect)" ondblclick="setAssetDetails(7,'bouquet7.jpg','//ZVIKA/XMPiEData/1/3/assets//bouquet7.jpg', AssetOpen, AssetSelect)">bouquet7.jpg</a></td>
<!--<td nowrap class="listtext"><a href="#" target="ComponentDetails" onClick="setAssetDetails(7,'bouquet7.jpg','//ZVIKA/XMPiEData/1/3/assets//bouquet7.jpg')">bouquet7.jpg</a></td>
<td nowrap class="listtext">JPEG Image</td>
<td nowrap class="listtext">145kb</td>
<td nowrap class="listtext">07-Jul-2001 10:32</td> -->
</tr>
</table>
</div>
</body>
</html>