Dynamically adjusting DIV height with Javascript

Dear all,

I’m new on this forum, and not a real Javascript expert. Maybe someone can help me. I have already been looking for a solution on this forum, but the tips I’ve found didn’t help until now.
I’m having a problem with dynamically building up a webpage.
The page consists of a DIV-tag, to center all the content on the page.
The DIV-tag consists of 3 other DIV tags, each consisting of a table.
The first one is a small header, the last one is some kind of legend, and the middle one is a big table with content in it.
Now I want the last DIV and the first DIV to be always visible on the screen, if enough screen space, and the middle one should have a dynamic height, depending on the height of the other 2 DIV’s. I ‘ve written a Javascript function, and it seems to calculate the height correctly, but the middle DIV doesn’t resize :-/

This is how the page looks:

|DIV_1: header |
|_____________|
|DIV_2: content |
|_____________|
|DIV_3: legend |
|_____________|

Javascript code:

function pageY(elem)
{
return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}

function getDocHeight()
{
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}

var buffer = 20;
function resizeDiv()
{
var height = document.body.offsetHeight;
height -= pageY(document.getElementById(‘orderListDIV’))+ buffer ;

var docHeight = getDocHeight();
docHeight -= pageY(document.getElementById(‘legendDIV’))+ buffer ;

height -= docHeight;

if (height < 0)
height = 0;

document.getElementById(‘orderListDIV’).style.height = height + ‘px’;

}

The last statement doesn’t seem to work: the orderListDIV tag is not resized…

Can someone help me?

Thanks in advance!

Best regards,

Diederik

Also in #JavaScript _↴