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

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

Answer 2

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

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

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

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

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


updateSize ();

Answer 3

这是最干净的方式：