I am having a problem where I resize a div relative to the page size, when you resize the window the div should resize to fit the page. It works okay when you make the page longer, but if you make the page shorter it doesn't work.

Please have a look at this example to see what I mean: http://www.brighton360.com/index.php.html
(Problem occurs in Opera & FF). Click on one of the images, (click OK on alert) resize the window so that it is really thin (click OK on alert). Now resize the window back to fullscreen. I added some debugging code, an alert pops up and you can see that the overlay div has resized to 1px - but look at the scrollbar - its the same as when the window was small. Click okay on the alert and the div resizes to fit the page - which is the same height as it was when the window was small. So you're left with a massive blank section at the bottom of the page.

Please could anyone help me with this, I don't understand why the page is staying so long when it doesn't have any content to make it that long (at the point the div height is set to 1px).

This problem can be fixed by setting the div to display = none before recalculating page size, but I don't really like this fix. Why setting display = none doesn't have the same effect as changing the size to 1px high I don't know.