brianlees
asked on
Expand a scrolling Div to fill a table cell?
I would like a scrolling DIV to expand to fill the height of a table cell that is dynamic, but don't know how or if it is even possible. You can take a look at the DIV here:
www.fleer.com
It is right in the middle. If you look, the title line above it, the space in between, and the cell the div is in are located in one table, simplified below.
<table width="159" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="http:// link here">
<span class="Title"> Product Name here </span></a>
</td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td>
<div id="Layer1" style="position:absolute; width:200px; height:90px; overflow:auto; overflow-x:visible;">
<span class="BodyText"> text here </span>
</div>
</td>
</tr>
</table>
It is currently set for a fixed height, but I would like it to be dynamic to fill the cell vertically. Is that possible?
Thanks
Brian
www.fleer.com
It is right in the middle. If you look, the title line above it, the space in between, and the cell the div is in are located in one table, simplified below.
<table width="159" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="http:// link here">
<span class="Title"> Product Name here </span></a>
</td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td>
<div id="Layer1" style="position:absolute; width:200px; height:90px; overflow:auto; overflow-x:visible;">
<span class="BodyText"> text here </span>
</div>
</td>
</tr>
</table>
It is currently set for a fixed height, but I would like it to be dynamic to fill the cell vertically. Is that possible?
Thanks
Brian
ASKER
Hmmm... not quite. I added that to the header and I changed the DIV to this:
<script type="text/javascript">
<!--
function setSize()
{
obj=document.getElementByI d('Collect Text');
obj.style.height=obj.paren tNode.offs etHeight+' px';
}
onload=setSize;
onresize=setSize;
//-->
</script>
<tr>
<td>
<div id="CollectText" style=" width:200px; overflow:auto; overflow-x:visible;">
<span class="BodyText"> text here </span>
</div>
</td>
</tr>
But, it is not displaying correctly. Take a look:
http://www.fleer.com/index2.cfm
<script type="text/javascript">
<!--
function setSize()
{
obj=document.getElementByI
obj.style.height=obj.paren
}
onload=setSize;
onresize=setSize;
//-->
</script>
<tr>
<td>
<div id="CollectText" style=" width:200px; overflow:auto; overflow-x:visible;">
<span class="BodyText"> text here </span>
</div>
</td>
</tr>
But, it is not displaying correctly. Take a look:
http://www.fleer.com/index2.cfm
It fills the cell. IF you mean there is a problem because it expands the cell; that is because the cell does not have a size declared so it sizes to the content.
As long as you are going to use tables, especially nested tables, instead more modern approachs you have to be aware that every chang you make can affect other parts of the layout. It is all tied together.
Cd&
As long as you are going to use tables, especially nested tables, instead more modern approachs you have to be aware that every chang you make can affect other parts of the layout. It is all tied together.
Cd&
ASKER
Ah, that was the problem. I don't know how large the cell will be. The table, however, does have a fixed height, as you can see. But the cell is variable because the product name in the cell above can be one or two lines in length.
I guess there aren't any other solutions for this?
I guess there aren't any other solutions for this?
The only solution for this kind of layout, is that something must have a fixed size, and then you can use scripting to calculate and resize everything else. The problem is that the more complex it gets, the more difficult it is to get it to reliably cross-browser and cross-resolution.
Tables are intended for data presentation, not layout control. There are severe limits when you need a flexible layout, and you are locked inside of nested tables.
Cd&
Tables are intended for data presentation, not layout control. There are severe limits when you need a flexible layout, and you are locked inside of nested tables.
Cd&
Also you can use expressions for div's height but it will be a Internet Explorer specific solution... I'm not sure if other browsers support expressions for style properties..
Caner
Caner
ASKER
Can you explain the "expressions" thing? I can try it and browser test.
You can use expression like this:
<div style="width:expression(ta bleCell.wi dth);">
for more information you can read http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/setexpression.asp
<div style="width:expression(ta
for more information you can read http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/setexpression.asp
ASKER
Hmmm... tried it with height, but it did not work...even in IE.
Well, I think it's because you used it like exactly how I typed.. Check offsetHeight property of table, and you may need to use parseInt().. I'll check it and let you know tomorrow..
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
style="height:inherit"
Unfortuantely it is not support by IE and is only semi-reliable in browsers that do support it.
I think you will need a scripted solution, so in th ehead of the page put:
<script type="text/javascript">
<!--
function setSize()
{
obj=document.getElementByI
obj.style.height=obj.paren
}
onload=setSize;
onresize=setSize;
//-->
</script>
And you have another problem. The layer gets out of place when you resize the screen down. You ned to get rid of the absolute position, which should not be necessary anyway.
Cd&