Change margin/padding based on height of total HTML document via JavaScript?

Question

I saw a trick on a stack-overflow solution a couple months ago (I can't seem to find it by searching now though). Anyway, it basically said that if you wanted two divs the same height, you could do something along these lines:

<div id="wrapper">
    <div id="nav" style="padding-bottom: 500px; margin-bottom: -500px;">
    </div>
    <div id="content" style="padding-bottom: 500px; margin-bottom: -500px;">
    </div>
</div>

The padding and negative margin seem to cancel each other out, rendering the proper height as long as the data content inside the divs doesn't spill over the 500px limit (pretty nifty, but it obviously has a huge limitation as is).

We'll just assume that the divs are set up style wise to be next to each other like one's taking 20% of screen width and the other is taking 80%.

That works pretty well for me, though I'll admit I don't understand it as well as I'd like to. But here's my problem - I could set an absurdly large value for the margin/padding to make this work for a very long page length, but I think that's probably very inefficient and poor programming.

How can I set the style of a div to the height of the total HTML document using JavaScript so I can do this programatically and properly? And where should I call the line of JavaScript that would do that?

Here was my closest shot so far:

function varPageHeight()
{
    document.getElementById('nav').style.padding-bottom = self.innerHeight + 'px';
    document.getElementById('nav').style.margin-bottom  = self.innerHeight + 'px';
    document.getElementById('content').style.padding-bottom = self.innerHeight + 'px';
    document.getElementById('content').style.margin-bottom  = self.innerHeight + 'px';
}

It doesn't work though - it looks like it does screen height instead of document height or something like that.

Answer 1

If you use CSS properties in JavaScript you can't use dash. CSS property: padding-bottom is paddingBottom in JavaScript

so your code should look like:

function varPageHeight()
{
    document.getElementById('nav').style.paddingBottom = self.innerHeight + 'px';
    document.getElementById('nav').style.marginBottom  = self.innerHeight + 'px';
    document.getElementById('content').style.paddingBottom = self.innerHeight + 'px';
    document.getElementById('content').style.marginBottom  = self.innerHeight + 'px';
}

or you can use jQuery:

function varPageHeight() {
    var innerHeight = self.innerHeight;
    $('#nav').css({
        'padding-bottom': self.innerHeight,
        'margin-bottom': self.innerHeight
    });
    $('#content').css({
        'padding-bottom': self.innerHeight,
        'margin-bottom': self.innerHeight
    });
}

Answer 2

To be honest, if you're trying to get equal height floated columns and you're using javascript for the solution anyway, don't depend on padding / margin. It's ugly as hell and brings its own set of problems. Best thing is just to set the height of all the columns to w/e is highest.

Here is a solution that does this in jQuery: http://jsfiddle.net/sg3s/6W4wb/

Pure javascript could be done but you'll have a hell of a job making it work properly/cross-browser (old versions of IE specifically) with all their interpetations of what height should be.

If you really want that padding/margin solution I want to know why because I can't really think of a good reason to do that. That specific solution was designed as a workarround for a css limitation... When you're using javascript that limitation is no longer there.