Zvika
asked on
Scrollable div with height=100%
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/mai nstyle.css " type="text/css">
<SCRIPT language="JavaScript" SRC="/Utils/XMPiEScripts.j s">
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" >
<div id="Buttons" style="position:absolute;t op:0;overf low-X:hidd en;overflo w-y:hidden ;width:100 %;height:2 2;z-index: 1">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor=#003399>
<td nowrap class="sectionHead" valign="middle"> Camp aign Assets</td>
<td nowrap align="right" valign="middle">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="#" onMouseOut="MM_swapImgRest ore()" onMouseOver="MM_swapImage( 'openbtn', '','../../ images/ope n-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_swapImgRest ore()" onMouseOver="MM_swapImage( 'deletebtn ','','../. ./images/d elete-over .gif',1)"> <img alt="Delete Asset" name="deletebtn" border="0" src="../../images/delete.g if" width="75" height="21" onClick="confirmFormSubmit ion(AssetD elete,'Ass et')"></a> </td>
<td><a href="#" onMouseOut="MM_swapImgRest ore()" onMouseOver="MM_swapImage( 'newbtn',' ','../../i mages/new- over.gif', 1)"><img alt="New Asset" name="newbtn" border="0" src="../../images/new.gif" width="75" height="21" onClick="AssetNew.submit() ;"></a></t d>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="tableDiv" style="position:absolute;t op:22;over flow-X:vis ible;overf low-y:auto ;width:100 %;height:1 00%;">
<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/li sticons/un known.gif" width="16" height="16"></td>
<td nowrap class="listtext"><a href="javascript:setAssetD etails(1,' bouquet1.j pg','//ZVI KA/XMPiEDa ta/1/3/ass ets//bouqu et1.jpg', AssetOpen, AssetSelect)" ondblclick="setAssetDetail s(1,'bouqu et1.jpg',' //ZVIKA/XM PiEData/1/ 3/assets// bouquet1.j pg', AssetOpen, AssetSelect)">bouquet1.jpg </a></td>
<!--<td nowrap class="listtext"><a href="#" target="ComponentDetails" onClick="setAssetDetails(1 ,'bouquet1 .jpg','//Z VIKA/XMPiE Data/1/3/a ssets//bou quet1.jpg' )">bouquet 1.jpg</a>< /td>
<td nowrap class="listtext">JPEG Image</td>
<td nowrap class="listtext">145kb</td >
<td nowrap class="listtext">07-Jul-20 01 10:32</td> -->
</tr>
<tr>
<td nowrap width="24" align="center" class="listtext"><img src="../../images/nodes/li sticons/un known.gif" width="16" height="16"></td>
<td nowrap class="listtext"><a href="javascript:setAssetD etails(2,' bouquet2.j pg','//ZVI KA/XMPiEDa ta/1/3/ass ets//bouqu et2.jpg', AssetOpen, AssetSelect)" ondblclick="setAssetDetail s(2,'bouqu et2.jpg',' //ZVIKA/XM PiEData/1/ 3/assets// bouquet2.j pg', AssetOpen, AssetSelect)">bouquet2.jpg </a></td>
<!--<td nowrap class="listtext"><a href="#" target="ComponentDetails" onClick="setAssetDetails(2 ,'bouquet2 .jpg','//Z VIKA/XMPiE Data/1/3/a ssets//bou quet2.jpg' )">bouquet 2.jpg</a>< /td>
<td nowrap class="listtext">JPEG Image</td>
<td nowrap class="listtext">145kb</td >
<td nowrap class="listtext">07-Jul-20 01 10:32</td> -->
</tr>
<tr>
<td nowrap width="24" align="center" class="listtext"><img src="../../images/nodes/li sticons/un known.gif" width="16" height="16"></td>
<td nowrap class="listtext"><a href="javascript:setAssetD etails(3,' bouquet3.j pg','//ZVI KA/XMPiEDa ta/1/3/ass ets//bouqu et3.jpg', AssetOpen, AssetSelect)" ondblclick="setAssetDetail s(3,'bouqu et3.jpg',' //ZVIKA/XM PiEData/1/ 3/assets// bouquet3.j pg', AssetOpen, AssetSelect)">bouquet3.jpg </a></td>
<!--<td nowrap class="listtext"><a href="#" target="ComponentDetails" onClick="setAssetDetails(3 ,'bouquet3 .jpg','//Z VIKA/XMPiE Data/1/3/a ssets//bou quet3.jpg' )">bouquet 3.jpg</a>< /td>
<td nowrap class="listtext">JPEG Image</td>
<td nowrap class="listtext">145kb</td >
<td nowrap class="listtext">07-Jul-20 01 10:32</td> -->
</tr>
<tr>
<td nowrap width="24" align="center" class="listtext"><img src="../../images/nodes/li sticons/un known.gif" width="16" height="16"></td>
<td nowrap class="listtext"><a href="javascript:setAssetD etails(4,' bouquet4.j pg','//ZVI KA/XMPiEDa ta/1/3/ass ets//bouqu et4.jpg', AssetOpen, AssetSelect)" ondblclick="setAssetDetail s(4,'bouqu et4.jpg',' //ZVIKA/XM PiEData/1/ 3/assets// bouquet4.j pg', AssetOpen, AssetSelect)">bouquet4.jpg </a></td>
<!--<td nowrap class="listtext"><a href="#" target="ComponentDetails" onClick="setAssetDetails(4 ,'bouquet4 .jpg','//Z VIKA/XMPiE Data/1/3/a ssets//bou quet4.jpg' )">bouquet 4.jpg</a>< /td>
<td nowrap class="listtext">JPEG Image</td>
<td nowrap class="listtext">145kb</td >
<td nowrap class="listtext">07-Jul-20 01 10:32</td> -->
</tr>
<tr>
<td nowrap width="24" align="center" class="listtext"><img src="../../images/nodes/li sticons/un known.gif" width="16" height="16"></td>
<td nowrap class="listtext"><a href="javascript:setAssetD etails(5,' bouquet5.j pg','//ZVI KA/XMPiEDa ta/1/3/ass ets//bouqu et5.jpg', AssetOpen, AssetSelect)" ondblclick="setAssetDetail s(5,'bouqu et5.jpg',' //ZVIKA/XM PiEData/1/ 3/assets// bouquet5.j pg', AssetOpen, AssetSelect)">bouquet5.jpg </a></td>
<!--<td nowrap class="listtext"><a href="#" target="ComponentDetails" onClick="setAssetDetails(5 ,'bouquet5 .jpg','//Z VIKA/XMPiE Data/1/3/a ssets//bou quet5.jpg' )">bouquet 5.jpg</a>< /td>
<td nowrap class="listtext">JPEG Image</td>
<td nowrap class="listtext">145kb</td >
<td nowrap class="listtext">07-Jul-20 01 10:32</td> -->
</tr>
<tr>
<td nowrap width="24" align="center" class="listtext"><img src="../../images/nodes/li sticons/un known.gif" width="16" height="16"></td>
<td nowrap class="listtext"><a href="javascript:setAssetD etails(6,' bouquet6.j pg','//ZVI KA/XMPiEDa ta/1/3/ass ets//bouqu et6.jpg', AssetOpen, AssetSelect)" ondblclick="setAssetDetail s(6,'bouqu et6.jpg',' //ZVIKA/XM PiEData/1/ 3/assets// bouquet6.j pg', AssetOpen, AssetSelect)">bouquet6.jpg </a></td>
<!--<td nowrap class="listtext"><a href="#" target="ComponentDetails" onClick="setAssetDetails(6 ,'bouquet6 .jpg','//Z VIKA/XMPiE Data/1/3/a ssets//bou quet6.jpg' )">bouquet 6.jpg</a>< /td>
<td nowrap class="listtext">JPEG Image</td>
<td nowrap class="listtext">145kb</td >
<td nowrap class="listtext">07-Jul-20 01 10:32</td> -->
</tr>
<tr>
<td nowrap width="24" align="center" class="listtext"><img src="../../images/nodes/li sticons/un known.gif" width="16" height="16"></td>
<td nowrap class="listtext"><a href="javascript:setAssetD etails(7,' bouquet7.j pg','//ZVI KA/XMPiEDa ta/1/3/ass ets//bouqu et7.jpg', AssetOpen, AssetSelect)" ondblclick="setAssetDetail s(7,'bouqu et7.jpg',' //ZVIKA/XM PiEData/1/ 3/assets// bouquet7.j pg', AssetOpen, AssetSelect)">bouquet7.jpg </a></td>
<!--<td nowrap class="listtext"><a href="#" target="ComponentDetails" onClick="setAssetDetails(7 ,'bouquet7 .jpg','//Z VIKA/XMPiE Data/1/3/a ssets//bou quet7.jpg' )">bouquet 7.jpg</a>< /td>
<td nowrap class="listtext">JPEG Image</td>
<td nowrap class="listtext">145kb</td >
<td nowrap class="listtext">07-Jul-20 01 10:32</td> -->
</tr>
</table>
</div>
</body>
</html>
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
<title>Asset List</title>
<link rel="stylesheet" href="/XmpieSite/Utils/mai
<SCRIPT language="JavaScript" SRC="/Utils/XMPiEScripts.j
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" >
<div id="Buttons" style="position:absolute;t
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor=#003399>
<td nowrap class="sectionHead" valign="middle"> Camp
<td nowrap align="right" valign="middle">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="#" onMouseOut="MM_swapImgRest
<td><a href="#" onMouseOut="MM_swapImgRest
<td><a href="#" onMouseOut="MM_swapImgRest
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="tableDiv" style="position:absolute;t
<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
<!--<td nowrap class="listHeader"><img src="../../images/sort-no.
<td nowrap class="listHeader"><img src="../../images/sort-no.
<td nowrap class="listHeader"><img src="../../images/sort-no.
</tr>
<tr>
<td nowrap width="24" align="center" class="listtext"><img src="../../images/nodes/li
<td nowrap class="listtext"><a href="javascript:setAssetD
<!--<td nowrap class="listtext"><a href="#" target="ComponentDetails" onClick="setAssetDetails(1
<td nowrap class="listtext">JPEG Image</td>
<td nowrap class="listtext">145kb</td
<td nowrap class="listtext">07-Jul-20
</tr>
<tr>
<td nowrap width="24" align="center" class="listtext"><img src="../../images/nodes/li
<td nowrap class="listtext"><a href="javascript:setAssetD
<!--<td nowrap class="listtext"><a href="#" target="ComponentDetails" onClick="setAssetDetails(2
<td nowrap class="listtext">JPEG Image</td>
<td nowrap class="listtext">145kb</td
<td nowrap class="listtext">07-Jul-20
</tr>
<tr>
<td nowrap width="24" align="center" class="listtext"><img src="../../images/nodes/li
<td nowrap class="listtext"><a href="javascript:setAssetD
<!--<td nowrap class="listtext"><a href="#" target="ComponentDetails" onClick="setAssetDetails(3
<td nowrap class="listtext">JPEG Image</td>
<td nowrap class="listtext">145kb</td
<td nowrap class="listtext">07-Jul-20
</tr>
<tr>
<td nowrap width="24" align="center" class="listtext"><img src="../../images/nodes/li
<td nowrap class="listtext"><a href="javascript:setAssetD
<!--<td nowrap class="listtext"><a href="#" target="ComponentDetails" onClick="setAssetDetails(4
<td nowrap class="listtext">JPEG Image</td>
<td nowrap class="listtext">145kb</td
<td nowrap class="listtext">07-Jul-20
</tr>
<tr>
<td nowrap width="24" align="center" class="listtext"><img src="../../images/nodes/li
<td nowrap class="listtext"><a href="javascript:setAssetD
<!--<td nowrap class="listtext"><a href="#" target="ComponentDetails" onClick="setAssetDetails(5
<td nowrap class="listtext">JPEG Image</td>
<td nowrap class="listtext">145kb</td
<td nowrap class="listtext">07-Jul-20
</tr>
<tr>
<td nowrap width="24" align="center" class="listtext"><img src="../../images/nodes/li
<td nowrap class="listtext"><a href="javascript:setAssetD
<!--<td nowrap class="listtext"><a href="#" target="ComponentDetails" onClick="setAssetDetails(6
<td nowrap class="listtext">JPEG Image</td>
<td nowrap class="listtext">145kb</td
<td nowrap class="listtext">07-Jul-20
</tr>
<tr>
<td nowrap width="24" align="center" class="listtext"><img src="../../images/nodes/li
<td nowrap class="listtext"><a href="javascript:setAssetD
<!--<td nowrap class="listtext"><a href="#" target="ComponentDetails" onClick="setAssetDetails(7
<td nowrap class="listtext">JPEG Image</td>
<td nowrap class="listtext">145kb</td
<td nowrap class="listtext">07-Jul-20
</tr>
</table>
</div>
</body>
</html>
You could simply set the height of the div to 90%. That works as long as the page is more than 220 pixels high. There will be a small unused area at the bottom of the page, but at least that's better than having an overflow...
You could also write a javascript function that sets the height of the div to the available height minus the height of the title and borders. Put a call to the function in the body onload event and the window resizeend event. This will be quite browser-specific, though...
You could also write a javascript function that sets the height of the div to the available height minus the height of the title and borders. Put a call to the function in the body onload event and the window resizeend event. This will be quite browser-specific, though...
ASKER
GreenGhost
I thoght about both of your ideas and tried them before posting this question. The thing is, that that page is one frame in a frame set that is resizeable, so 90% (or any other compremised %) is not good enough, because the user may resize it to anything between 0 to 800 px.
This is also true for your second idea - I made a script that fix it in OnLoad, but afterwards, if the user changes the frameset sizes, or the entire explorer window size - the problem will occur.
Any other ideas?
(and - is that the right behaviour for 100% height?)
I thoght about both of your ideas and tried them before posting this question. The thing is, that that page is one frame in a frame set that is resizeable, so 90% (or any other compremised %) is not good enough, because the user may resize it to anything between 0 to 800 px.
This is also true for your second idea - I made a script that fix it in OnLoad, but afterwards, if the user changes the frameset sizes, or the entire explorer window size - the problem will occur.
Any other ideas?
(and - is that the right behaviour for 100% height?)
You will not get it to work correct with height expressed as a percentage. if you want the div to be scrollabe and work correctly you have three requirements and a limitation.
The limitation is IE only. The requirements: It must be absolutely positioned; It must specify overflow-y:scroll or overflow-y:auto; and it must have a fixed height in pixels.
You can change the height dynamically with scriping, but if you use a percentage you can play around with it all you want; you will not get it to work reliably. I have don hundreds of scrolling divs what you want is simple within the limits of the technology, but it is very easy to break. The percentage is a percentage of the total window, , not what is left so no matter what you do and no matter what percentage you use, it is not going to show the way you want it too for all sizes and resolutions.
Cd&
Cd&
The limitation is IE only. The requirements: It must be absolutely positioned; It must specify overflow-y:scroll or overflow-y:auto; and it must have a fixed height in pixels.
You can change the height dynamically with scriping, but if you use a percentage you can play around with it all you want; you will not get it to work reliably. I have don hundreds of scrolling divs what you want is simple within the limits of the technology, but it is very easy to break. The percentage is a percentage of the total window, , not what is left so no matter what you do and no matter what percentage you use, it is not going to show the way you want it too for all sizes and resolutions.
Cd&
Cd&
ASKER
Cd&
How can I change the height dynamicly? I should do it if the user changes the window size, or the framesset division... Do you have some hints for me?
How can I change the height dynamicly? I should do it if the user changes the window size, or the framesset division... Do you have some hints for me?
ASKER
Cd&
How can I change the height dynamicly? I should do it if the user changes the window size, or the framesset division... Do you have some hints for me?
How can I change the height dynamicly? I should do it if the user changes the window size, or the framesset division... Do you have some hints for me?
In the head of the page:
<script language="JavaScript">
<!--
function resetHgt()
{
document.getElementById('t ableDiv'). style.heig ht=documen t.body.cli entHeight- 22;
}
//-->
</script>
Then in the body tag:
<body onLoad="resetHgt()" onResize="resetHgt()">
That should keep it 22px from the top with a height equal t the res of the page. It might need an adjustment of a few pixels depending on the margin settings.
Cd&
<script language="JavaScript">
<!--
function resetHgt()
{
document.getElementById('t
}
//-->
</script>
Then in the body tag:
<body onLoad="resetHgt()" onResize="resetHgt()">
That should keep it 22px from the top with a height equal t the res of the page. It might need an adjustment of a few pixels depending on the margin settings.
Cd&
ASKER
This will only work in IE on Windows I guess...
Right?
(I need at least IE 5+, NN 6+ for both MAC & WIN)
Right?
(I need at least IE 5+, NN 6+ for both MAC & WIN)
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks Cd&.
I couldn't graded you with an A, as it is actually a workaround, not a solution, plus the fact that I should still make some research for Mac, & Netscape.
I couldn't graded you with an A, as it is actually a workaround, not a solution, plus the fact that I should still make some research for Mac, & Netscape.
If there was a perfect solution. I would have given it to you. If a workaround is the best solution then you sitll got the best possible answer, whether you like the limits of the technology or not.
I see no point in trying to help you in the future, because you did not grade my solution, but the limits of the technology. Send you complaints to Microsoft and Netscrap. I didn't invent the technology.
Cd&
I see no point in trying to help you in the future, because you did not grade my solution, but the limits of the technology. Send you complaints to Microsoft and Netscrap. I didn't invent the technology.
Cd&
ASKER
Cd&
You read only the first part of my comment.
>> plus the fact that I should still make
>> some research for Mac, & Netscape.
as your solution was only for IE 5+ in Win, though I needed NN 6+ for Win and IE 5+ & NN 6+ for Mac. So I graded your solution, which is probably the best there is in the technology, but gavr you B as this is only partial answer (1/4 of what I need - one browwser out of four).
Please don't be so rude... (not to me, and even not to Apple & Netscape - or actually Mozilla)
You read only the first part of my comment.
>> plus the fact that I should still make
>> some research for Mac, & Netscape.
as your solution was only for IE 5+ in Win, though I needed NN 6+ for Win and IE 5+ & NN 6+ for Mac. So I graded your solution, which is probably the best there is in the technology, but gavr you B as this is only partial answer (1/4 of what I need - one browwser out of four).
Please don't be so rude... (not to me, and even not to Apple & Netscape - or actually Mozilla)
The way you are doing this now you will never get the button div to stay where it is...it will move along with the scrollbar...as far as I know overflow is only really supported on the body tag, could be wrong there though
There are other types of solutions to do what you want to do...scrollable layers are very well doable...
Just have a look at:
http://www.thekitchen.nl/default.asp?Page=/welkom/main.asp
See in the middle of the screen...there is text there and it is scrolled by going over 2 small arrows at the right side of it, if this is more like what you want I can make an easier version of it for you so you could use that...
Max.