I'm using this code to resize a div on my page:

function sizeContent() {
    var newHeight = ($("html").height() - $(".header").height() -3) + "px";
    $(".content").height(newHeight);
}

I am triggering this using:

$(window).resize(sizeContent());

But I also call it inside

$(document).ready(sizeContent());

to set all the heights properly.

If i resize the browser window by dragging at its borders it works great.

But the initial call does not seem to have any effect. Putting an alert inside the sizeContent function I can see that it is being called at page ready, and is setting the right height, but nothing is changed on the page.

It's as if the browser does not recognize that it needs to redraw anything unless the window itself is changed.

Solved: In the end it was not the javascript that was the problem, using div's with display:table and display:table-row was causing it. Removed these from the css and everything worked.

I'm using this code to resize a div on my page:

function sizeContent() {
    var newHeight = ($("html").height() - $(".header").height() -3) + "px";
    $(".content").height(newHeight);
}

I am triggering this using:

$(window).resize(sizeContent());

But I also call it inside

$(document).ready(sizeContent());

to set all the heights properly.

If i resize the browser window by dragging at its borders it works great.

But the initial call does not seem to have any effect. Putting an alert inside the sizeContent function I can see that it is being called at page ready, and is setting the right height, but nothing is changed on the page.

It's as if the browser does not recognize that it needs to redraw anything unless the window itself is changed.

Solved: In the end it was not the javascript that was the problem, using div's with display:table and display:table-row was causing it. Removed these from the css and everything worked.

• javascript
• jquery
• html
• css

3 Answers 3

// If you put your code at the bottom of the page to avoid needing`$(document).ready`, it gets even simpler:

$(window).on('resize', function () {
    var newheight = ($(window).height() - $('.header').height() - 3);
    $(".content").css("height", newheight);
}).trigger('resize');


// Another way to do that same thing

$(document).ready(sizeContent);
$(window).on('resize', sizeContent);

function sizeContent() {
  var newheight = ($(window).height() - $('.header').height() - 3);
    $(".content").css("height", newheight);
}


// Another technique is to`.trigger()`one event inside the other:

$(window).on('resize', function () {
   var newheight = ($(window).height() - $('.header').height() - 3);
   $(".content").css("height", newheight);
});
$(document).ready(function () {
   $(window).trigger('resize');
});

Replace

$(".content").css({height:newHeight}) //replace this

with

(".content").height(newHeight);

Use below code:

function sizeContent() {
    var newHeight = ($(window).height() - $(".header").css('height')-3) ;
    $(".content").css('height',newHeight);
}