jquery - CSS 绝对定位的 div 高度

Question

我的 HTML 文档结构如下:

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

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

#slideshow div 以较低的 z-index 进行绝对定位，而 #content div 以高度设置为 auto 进行相对定位。

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

我什至尝试过 jQuery .innerheight() 属性，但没有成功。

Answer 1

如果您的内容可以动态调整大小(例如通过添加新内容，或在 Chrome 等浏览器中拖动文本区域)，您应该包括 jquery resize 插件，以及在调整内容 div 大小时触发的回调。

如果您的内容可以调整大小的唯一方法是在窗口调整大小，您不需要包含 jquery 调整大小，然后您应该将调整大小事件绑定(bind)到窗口对象 $(window).resize(....) ;

如果您的内容无法以任何方式调整大小，则只需调用 updateSize() 方法即可。您可以在以下链接中检查它，但我建议您在 Chrome 中检查它并调整文本区域的大小，以便您可以测试幻灯片放映框的更新方式。

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

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

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


updateSize ();