根据预设“宽度”和“高度”的内容动态更改“div”的高度

时间:2014-09-19 13:02:43

标签: javascript jquery html css ajax

我有一个" div"预设"宽度"和"身高"。我需要改变那个" div"的高度。基于内容。我正在寻找一些JavaScript,但找不到适合我的。

以下是我的简单示例,需要改进http://jsfiddle.net/dmitry313/1zr6Lhwa/

HTML

<div id="content">
<h2>Text</h2>
<p>Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example </p> 
</div> 

CSS

    h2 {
font:18px/30px Arial;
}   
#content {
width:200px;
height:100px;
border:1px solid #000;
background: yellow;
}

编辑:最初预设&#34;宽度&#34;和&#34;身高&#34;很重要,无法改变

4 个答案:

答案 0 :(得分:5)

从css中删除height。那个怎么样:

JSFiddle

修改:如果无法更改,请添加overflow: auto;

JSFiddle

答案 1 :(得分:2)

使用min-height代替height,以便<div>相应地展开。

&#13;
&#13;
h2 {
    font:18px/30px Arial;
}
#content {
    width:200px;
    min-height:100px;
    border:1px solid #000;
    background: yellow;
}
&#13;
<div id="content">
    
<h2>Text</h2>

    <p>Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example</p>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

试试这个:

$('#content').height($('#content')[0].scrollHeight)

答案 3 :(得分:0)

我会像这样使用height:auto;

#content {
    height : auto;
}