如何应对可变高度的内容？答案

【问题标题】：how to cope with content of variable height?如何应对可变高度的内容？
【发布时间】：2013-01-29 03:27:26
【问题描述】：

this page 上有一个图片轮播（来自 Twitter Bootstrap），其中显示了一系列图片和标题。所有图像的高度相同，但包含轮播标题的元素的高度将根据标题文本的长度而有所不同。

当浏览器宽度较窄时（例如在移动设备上查看时），这会成为一个问题，因为随着窗口变窄，字幕高度之间的差异会变得更加明显。如果您将浏览器设置为大约 450 像素宽并在轮播下方向下滚动，您会注意到轮播下方的内容每次在轮播中的图像发生变化时都会向上/向下跳跃，以适应新图像的更小/更大尺寸标题。

这使得阅读轮播下方的任何文本（在小屏幕上）变得很困难，因为内容大约每 5 秒上下跳跃一次。除了将轮播放在页面的最底部或禁用轮播图像的自动循环之外，还有其他解决方案吗？

【问题讨论】：

标签： css twitter-bootstrap responsive-design

【解决方案1】：

我希望给 .carousel-caption div 设置一个最小高度可以工作。如果没有，请尝试在小型设备上使用媒体查询为其提供准确的高度。

第一种方式：

.carousel-caption {
  min-height: 300px !important;
}

第二种方式：

@media screen and max-width:xxxpx
{
.carousel-caption {
  height: 300px !important;
} 

}

这可能在底部有一些空白空间用于小段落，但没有出路。这至少可以防止它上下浮动。

【讨论】：

【解决方案2】：

如果您说标题容器需要适应它的子元素（要显示的字符数量），您可以尝试@Darshan 建议的内容以及overflow: hidden; css 属性，或者您可以设置标题容器到其相对父级中的绝对位置。

例如，

<div class="relative" style="position: relative">
    <div class="child" style="position: absolute; bottom: 0; left: 0;">
        <p> My text yadda yadda yadda... </p>
    </div>
    <div style="clear: both;"></div>
</div>

将父容器设置为relative 会重置其子元素的边界，然后所有子元素位置将绑定到最近的具有relative 位置的父容器。

这样，内容仍会显示，但不会下降到页面上的其余内容中，只要相对父级没有高度规范。

【讨论】：