javascript - 根据文本长度设置轮播容器 div 的高度

Question

我有一个 img 轮播，其描述内容位于宽屏窗口的右侧，然后当浏览器窗口到达断点时，描述将显示在图像下方。我希望根据最长描述中的文本量来调整 div 的大小，否则当轮播动画时，页面的其余部分会根据描述中的文本量上下移动。

我假设我需要一些 javascript 来查看所有轮播文本描述，然后根据最长的描述文本设置容器 div 的高度。

有什么想法可以完成这个任务吗？

更新:我创建了这个http://jsfiddle.net/chpucat0/展示我需要的东西。我需要所有 div 的所有高度来匹配包含最多文本的 div。

<div class="description">Small amount of text</div>
<div class="description">Slightly larger amount of text.</p>
<div class="description">And then the really, really, really long description here.</div>

Answer 1

在此 StackOverflow question 中提出了非常类似的问题。并回答如下“也许你可以删除 height 属性(确保它没有在 CSS 中设置)并让 DIV 自行扩展高度。”将答案与查询相结合，以查找哪个最高来检测所需的高度，例如...这是另一个 StackOverflow response这涵盖了如何进行。

您有我们可以查看的示例吗？请发布演示链接或粘贴您的代码。

更新:以下是一个易于使用的 jQuery 函数的文档，该函数允许我们获取和操作元素的 height:http://api.jquery.com/height/

第二次更新:(感谢您添加示例代码以供使用)

取决于我们需要的具体程度(即，AllElementsHeight 必须等于...“匹配元素集中第一个元素的当前计算高度，包括填充、边框和可选的边距。”(例如，基于对于这个请求要求，我们可以使用 jQuery 的 '.outerHeight()' (还有其他方法来获取此数据(例如获取 Javascript 'offsetHeight'，我将省略性能变化的争论，因为它在网络上有详细记录(即, http://jsperf.com/outerheight-vs-offsetheight )))))，我们可以使用 jQuery 给我们最大 height 的 div 的高度，这里是 jQuery documentation其中提供了多个示例。

我已经 fork 了更新后的帖子的 fiddle ，可以在此处查看 http://jsfiddle.net/id_0t/h6ndwf2x/ .

以下是在更新的 fiddle 中找到的概念验证代码:

HTML

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut nisi et tortor aliquet viverra at a nibh. Aenean dictum diam tortor, aliquam posuere nunc elementum sit amet.</div>

<p class="description">Curabitur quis neque ut enim dignissim cursus.</p>

<div class="description">Ut vehicula dolor a mi aliquam feugiat. Integer varius ipsum non nisl vehicula mattis. Curabitur eget eleifend ex. Proin eu quam mi. Sed non mauris dui. Integer tempus at velit id interdum. Fusce sed ultrices nisi. Pellentesque consectetur diam in magna dapibus imperdiet. Pellentesque consectetur diam in magna dapibus imperdiet.</div>

<div>
    This 'div' will not have its height defined because it doesn't have the ".description" class applied to it.
</div>

CSS

div {
    background-color: #efefef;
}
.description {
    background-color: grey;
    margin: 20px;
    padding: 10px;
}

Javascript

var $d = $( ".description" ), 
    tallestDivHeight = 0


$d.each(function (i, v) {
    var $t = $(this), 
        thisDivsHeight = $t.outerHeight()

    console.log(thisDivsHeight)

    if(thisDivsHeight > tallestDivHeight) tallestDivHeight = thisDivsHeight
})


$d.css('height', tallestDivHeight)