javascript - 让的高度决定的高度

Question

我在 <div> 中有一段文字随长度和高度而变化。我希望 div 的最小高度为 100px , 但增长为 <p> 的高度增加到 80px 以上.我设置了 css 属性 height: 100px对于 <div>但是当<p>超越80px文字刚刚溢出 <div>和 <div> 的高度保持不变。我应该怎么办？

代码:

<div id="outer_box">
    <div id="box">
        <p class="content"> Some long paragraph of content here </p>
    </div>
</div>

CSS:

#outer_box {
    width: 300px;
    min-height: 100px;
}

#box{
    width: 300px;
    min-height: 90px;
}

带有 id="box" 的 div确实改变了它的高度以包含 <p>完全，但是带有 id="outer_box" 的 div没有改变它的高度!

如果可能的话，我对 CSS 解决方案而不是 jQuery 解决方案感兴趣，我会使用任何可行的方法。选择纯 CSS 解决方案的原因是因为 div在用户进行鼠标悬停之前不存在。想知道如何定位 div使用尚未存在的 css

Answer 1

正如 Jleagle 所说，您必须使用 min-height。对于大多数浏览器:

height: auto !important;
height: 100px;
min-height: 100px;