CSS绝对定位的div高度

Question

我有我的HTML文档的结构如下：

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

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

的#slideshow DIV定位绝对具有较低的z-index和＃内容的div相对定位高度设置为自动。

问：如何确保幻灯片的高度也设置为自动并根据内容的高度？

我甚至试过jQuery .innerheight()属性没有运气。

Answer 1

如果你的内容可以（通过增加新的内容，或拖动在浏览器如Chrome浏览器的textarea例如）被dinamically调整，则应该包括jQuery的调整大小的插件，并且回调每当您的内容div被调整大小时触发。如果您的内容可以调整大小的唯一方式是调整窗口大小，您不需要包含jquery resize，然后您应该将resize事件绑定到窗口对象$（window）.resize（.... ）;

如果您的内容无法以任何方式调整大小，那么只需调用updateSize（）方法即可。您可以在以下链接中查看它，但我建议您在Chrome中检查它并调整textarea的大小，以便测试幻灯片放映盒的更新方式。

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

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

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


updateSize(); 

Answer 2

http://jsfiddle.net/jphellemons/qFE6b/

$('#slideshow').height($('#content').height()); 

Answer 3

这是最彻底的方法：

http://jsfiddle.net/peduarte/zTATa/