Body resized using jQuery, how to do I make children resize too?

Asked Mar 21 '16 at 13:40

Active Mar 21 '16 at 13:40

Viewed 167 times

I am using JQuery to adjust the height of the body so it fills the visible space without scroll bars appearing (as they do while using height:100%).

The following function is ran on document ready and window resize:

function padBody() {
  var viewPort = $('html').height();
  var navHeight = $('#master_navbar').height();
  var footerHeight = $('#master_footer').height();
  $('body').css('padding-top', navHeight +"px");
  $('body').css('min-height', (viewPort - footerHeight) + "px");
}

However the child divs inside body which are set to height:100% do not resize when the body's height it changed.

How can I get the other divs to redraw using the new body height?

asked Mar 21 '16 at 13:40

uhsl_m

1

Have you tryed using css 100vh? – Want to be deleted Mar 21 '16 at 13:45
I think 100vh will work. can you tried as suggested by @NicholasO'Malley – Kshirodra Meher Mar 21 '16 at 13:47
Possible duplicate of [How to make the main content div fill height of screen with css](http://stackoverflow.com/questions/18665171/how-to-make-the-main-content-div-fill-height-of-screen-with-css) – BSMP Mar 21 '16 at 13:54
The [third answer](http://stackoverflow.com/a/27574060/4076315) is the one you want. – BSMP Mar 21 '16 at 13:55

Body resized using jQuery, how to do I make children resize too?

0 Answers0