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?

what have you tried? if you know jquery it should be fairly straight forward. — depperm
– depperm, Commented Jun 25, 2015 at 17:02
Your question doesn't make sense, you didn't explain what xdiv is, but if they were one within the other they would always fill 100% of the screen. Setting it later on would make no difference. — nanobar
– nanobar, Commented Jun 25, 2015 at 17:06
xdiv is a div.. And no, it doesn't do it automatically since I've had to manually set it with CSS. And it worked fine until I started to add content. — Awn
– Awn, Commented Jun 25, 2015 at 17:08

Derek Story · Accepted Answer · 2015-06-25 17:08:25Z

1

You can use load:

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

edited Jun 25, 2015 at 17:08

answered Jun 25, 2015 at 17:06

Derek Story

9,5831 gold badge26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Awn Over a year ago

I think you messed up with the brackets, but let me see if it works.

anthumchris · Accepted Answer · 2015-06-25 17:07:10Z

0

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/

answered Jun 25, 2015 at 17:07

anthumchris

9,2492 gold badges35 silver badges60 bronze badges

Collectives™ on Stack Overflow

Setting HTML and BODY CSS using JS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related