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.getEle mentById( "row" );
/* Set DIV height to row height */
var div = document.getEle mentById( "div" );
div.style.heigh t = row.clientHeigh t + "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.
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.getEle mentById( "row" );
/* Set DIV height to row height */
var div = document.getEle mentById( "div" );
div.style.heigh t = row.clientHeigh t + "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.
Comment