«

Why does not the below code work in IE or FF? I have a table taking up
the full browser window made up of three rows. The middle row has an
ID of "row" and contains a div with an ID of "div". This script is meant to
change the height of div to that of the row in the table so that the
document
doesn't scroll outside of the viewport. Instead, when the browser window
is made smaller, the table gets bigger. I do not understand this. If a div
with overflow: auto worked at 100% the size of the container (a row in
a table) then I wouldn't have to go through all of this.

function Resize() {
/* Get row */

var row = document.getElementById( "row" );

/* Set DIV height to row height */

var div = document.getElementById( "div" );

div.style.height = row.clientHeight + "px";

}

What am I trying to achieve? I want a page where the top and bottom
rows in a table remain fixed to the required height of their content, and
where the middle row's height changes in accordance with browser
resizing. In this middle row I want a div that can scroll if its contents
would cause the div's height to increase (this should be done with the
overflow auto style). It sounds simple, but while it may work in IE,
it doesn't work in Firefox or Netscape. Hence, I feel the need to write
Javascript to fix this. I read a post earlier where someone else was
trying to achieve the same effect and could understand why it didn't
work (he had the div to 100% the height of a row in 100% high
table). I figure that if I can explicitly set the height of the div in
pixels
and the height of the row in pixels then it should overcome this issue. So,
I need code that will make a table take up the full height of a viewport,
a middle row in that table taking up the remainder of the height, then
a div filling that row whilst offering overflow auto.

Any help on this would be *greatly* appreciated.

fred wrote:
> Why does not the below code work in IE or FF?

It does for me, try this...

<style type="text/css">
div {border: 1px solid red; font-family: sans-serif;"}
</style>
<table border="1" height="100%" width="100%"
cellpadding="0" cellspacing="0">
<tr><td>td in row 0</td><td>&nbsp;</td></tr>
<tr>
<td height="100%" width="50%">
<div id="aDiv" style="width: 100%;" onclick="
var msg = '<b>Before resize:</b><br>'
+ this.nodeName + ' clientHeight = '
+ this.clientHeight;
var a = this;
while(a.nodeName != 'TR') {
a = a.parentNode;
}
msg += '<br>' + a.nodeName + ' clientHeight = '
+ a.clientHeight;
this.style.height = a.clientHeight + 'px';
msg += '<br><br>' + '<b>After resize:</b><br>'
+ this.nodeName + ' clientHeight = '
+ this.clientHeight;
msg += '<br>' + a.nodeName + ' clientHeight = '
+ a.clientHeight;
this.innerHTML = msg;
document.getElementById('brag').innerHTML =
'but not any longer...';
">Click on this div to resize it</div>
</td>
<td><div id="brag" style="height: 200px; width: 200px;
text-align: center; line-height: 200px">
<b>I'm the tallest...</b></div></td>
</tr>
<tr><td style="height: 30px; width: 400px">
td in row 2</td><td>&nbsp;</td></tr>
</table>

[...]


--
Rob

fred wrote:
> Why does not the below code work in IE or FF? I have a table taking up


Further information available at quirksmode:

<URL:http://www.quirksmode.org/js/doctypes.html>


--
Rob

RobG wrote:
> fred wrote:
>
>> Why does not the below code work in IE or FF?
>
>
> It does for me, try this...
>
[...]

You might also note that clientHeight is not a W3C standard, it
is a Microsoft invention and there is no public standard for it,
although it seems to be supported at least by Mozilla, Firefox
and Netscape.


<URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientheight.asp>



--
Zif