html - 如果内容被截断，父元素的高度会增加

Question

我真的无法重现我的问题，所以我只是发布了一个指向我当前出现问题的网站的链接:here .

我正在尝试截断 .event-description-div 的内容，如果它的内容大于 div。因此 .event-description 类定义如下:

.event-description {
    height: 70%;
    overflow: hidden;
}

但是如果内容大于初始宽度和高度(基于浏览器的分辨率)，内容确实会被截断，但所有其他父 div 的高度也会增加。我正在使用 bootstrap 3 以及一些 jquery 库，所以问题可能出自那里。

编辑:This如果右侧 div 的内容没有溢出，屏幕截图显示了默认和想要的行为。 This屏幕截图显示了不需要的行为。内容确实被截断了，但出于某种奇怪的原因，所有其他元素都增加了它们的高度，这是不应该发生的。

Answer 1

将您的 .col-md-4 更改为

.col-md-4 {
    max-height: 70%;
    background-color: rgba(0,0,0,0.7);
    color: rgb(255, 255, 255);
    overflow: hidden;
    padding-bottom: 20px;
}

并删除您自己插入的规则，即这些规则:

.event-description {
    height: 70%;
    overflow: hidden;
}

尽管应用我添加到 event-wrapper 类的规则可能会更好，因为您可能不想干扰框架的默认 CSS。