Getting the height of a div after setting it to auto in IE

Question

Hi,

I'm writing some JavaScript that changes the size of some content. To do this I need to know the size of a div within my content. If I have the following html:

<div id="wrapper">
   ... other stuff ...
   <div id="inner" style="height:400px">Some text in here</div>
   ... other stuff ...
</div>

And the following JavaScript:

$('#inner').height('auto');
var height = $("#wrapper").height();

In FireFox and Chrome the height variable increases as the inner div expands to fit all the text. In IE this stays the same. I guess it doesn't redraw the div straight away. Anybody know how to get the new correct height in IE?

Cheers

Answer 1

It the problem is that the element doesn't redraw right away, then you need to measure the height asynchronously - set a 0-millisecond timeout to measure it and continue execution.

Answer 2

Try it this way:

$(function() {
  $('#inner').height('auto');
  var height = $("#wrapper").height();
});

Wrapping it in $(function() { }); makes it wait for the DOM to render before running the script. It's probably a good idea to put anything that needs access to the DOM immediately after render inside that function.