Question

我在<div>内有一段文字，长度和高度都有所不同。我希望div的最小高度为100px，但随着<p>的高度增加到80px以上而增长。我为height: 100px设置了css属性<div>，但当<p>增长超过80px时，文字只会溢出<div>和<div>的高度{1}}保持不变。我该怎么办？

代码：

<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在用户执行鼠标悬停之前不存在。想知道如何使用尚未存在的css定位div

Answer 1

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

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

Answer 2

将其添加到div的样式中，一切都应该正常工作，也适用于旧浏览器：

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

Answer 3

将最小高度设置在css中的div上，然后我将使用jquery的height函数来计算段落高度。在你的javascript中试试这个：

$(document).ready(function(){
    var h = $('div p').height();
    $('div').css("height", h);
});

Answer 4

设置为自动时div的高度可让其中的内容决定其长度。但是 min-height 会覆盖并让您拥有div的最小高度

Answer 5

您设置min-height的{{1}}，然后通过标准CSS黑客处理旧版本的IE：

div

Live example

Answer 6

你似乎错过了自动换行属性。我在ie9和chrome中测试了以下样式。它似乎工作正常。

    <!DOCTYPE html>

    <html>
        <head>
           <style>
            #outer_box {
                width: 300px;
                min-height: 100px;
                background-color:blue;
            }

            #box{
                width: 300px;
                background-color:green;
                word-wrap:break-word;
            }
            </style>

        </head>

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

让<p>的高度确定</p> <div> </div>的高度

6 个答案: