动态添加子元素后没有得到正确的div高度？答案

【问题标题】：Not getting correct height of a div after adding child elements dynamically?动态添加子元素后没有得到正确的div高度？
【发布时间】：2015-04-29 13:33:47
【问题描述】：

我有一个 ID 为 div1 的主 DIV。我在文档加载事件的 div1 中添加了一些子元素（div、表格等）。但是当我在添加子元素后检查 div1 的高度时，高度没有改变。请帮帮我...

//HTML code for main DIV
    <div id='div1' style="height: 10px">&nbsp;</div>

//Javascript in Document Load event
var div1 = document.getElementById('div1');
var child1 = document.createElement('div');
child1.setAttribute('style', 'height:50px');
div1.appendChild(child1);
var height = $("#div1").height();
alert(height);//value of height is 10px NOT 50px

【问题讨论】：

在div1上尝试height:auto
感谢 Akshay 的回答。为父项设置 auto 但在我的项目中，我应该将 n 个子元素添加为具有不同高度的树（一个在另一个子项下）。那么，请问有没有其他解决方案而不自动设置高度？
或者你可以试试min-height:10px;div1
stackoverflow.com/questions/3504246/… 可能重复

标签： javascript jquery html css cordova

【解决方案1】：

这是一个错字，请将您的可变高度替换为var height = $("#div1").height();

【讨论】：

谢谢。那是我写在这里的错误。已编辑。

【解决方案2】：

试试这个。

http://jsfiddle.net/devkickstart/jzeg0k4u/

//HTML
<div id='div1'>&nbsp;</div>
//CSS
#div1{
    height: auto;
    min-height: 10px;
}
//JS
//Javascript in Document Load event
var div1 = document.getElementById('div1');
var child1 = document.createElement('div');
child1.setAttribute('style', 'height:50px');
div1.appendChild(child1);
var height = $("#div1").height();
alert(height);//value of height is 10px NOT 50px

尽量不要使用内联样式属性。

--编辑-- 你可以像下面这样优化你的js

var div1 = $('#div1');
var child1 = document.createElement('div');
$(child1).css('height', '50px');
div1.append(child1);
var height = div1.height();
alert(height);

【讨论】：

【解决方案3】：

你可以试试这个：

child1.style.height= "50px";

或

child1.setAttribute("style", "height: 50px;");

【讨论】：

【解决方案4】：

您好，height: 10px 已修复，因此不会更改。而不是使用高度使用min-height: 10px。这样，如果添加新的孩子，高度会自动增加。

【讨论】：