Cut off bottom of page with dynamically changing height?

I've about finished a site I've been working on for a while, but now I have an issue:

I've been using relative positioning to place divs above where they would normally be (top:-200px, for example) and that has resulted in a margin of about 300px at the bottom of my page that I don't want to be there.

I realize I should have used float:left; css to avoid开发者_StackOverflow this problem, and that's my fault, but is there a way to simply cut off the bottom 300px of the site using jquery?

You cannot simply cut off the absolute height and hide overflow because the height is changes with certain dynamic elements in the page.

I wrote this script to try to do it:

$(document).ready(function(){
    x=$('body').css("height");
    y=x.slice(0,4);
    z=parseInt(y);
    z=z-50;
    $('.contain').css("height",z+"px"); //.contain is a div that contains everything in the page
});

Except this doesn't work! It changes the container div height (and I can see it in firebug as being shorter) but it doesn't cut the content off! It just...gets smaller without doing anything. What's with that?

//edit

Here's the page http://olli.es/NSUW/index.html