Setting HTML and BODY CSS using JS

Question

In CSS, to set the height of a div so that it stretches from the top of the page to the bottom is done like so:

html, body, #xdiv {
    height: 100%;
    min-height: 100%;
}

The problem is, this executes straight away, so when the text or content loads, it's not 100% any more. My question is, can I use Jquery or JS to set the above after page load?

Answer 1

You can use load:

$(window).load(function() {
   $('html, body, #xdiv').css({ "height": "100%", "min-height": "100%"});
});

Answer 2

Try This: http://jsfiddle.net/00ho9kgv/

To vertically-center content, you'll need to wrap and use display: table, etc: http://jsfiddle.net/00ho9kgv/1/