Question

I have the following structure of my HTML document:

<div id="slideshow"></div>
<div id="content"></div>

$('#slideshow').css({
   'height' : $('#content').innerHeight()+'px'
})

The #slideshow div is positioned absolute with a lower z-index and the #content div is positioned relatively with height set to auto.

Question: How do I ensure that the height of slideshow is also set to auto and according tho the height of the content?

I even tried jQuery .innerheight() property with no luck.

Answer 1

If your content can be resized dinamically (for example by adding new content, or dragging a textarea in browsers such as Chrome), you should include the jquery resize plugin, and a callback that fires whenever your content div is resized.

If the only way your content can be resized is in a window resize, you dont need to include jquery resize, and then you should bind the resize event to the window object $(window).resize(….);

If your content cant be resized in any way, then just calling to the updateSize() method will do. You can check it in the following link, but I suggest you to check it in Chrome and resize the textarea so you can test how the slideshow box is also updated.

http://jsfiddle.net/qFE6b/2/

var updateSize = function(){
    $('#slideshow').height( $('#content').height()  );     
};

$("#content").resize(updateSize);


updateSize ();