Javascript 在添加输入框时动态调整div的大小

我试图在演示中扩大盒子的高度。单击“+”按钮时，将创建一个包含两个输入框的新行。我使用

element.offsetHeight

属性将当前高度增加一定量。但是，由于这返回的值是

像素

而不是

em

，因此大小调整没有按预期进行。在尝试单击它一定次数后，“+”符号不再包含在

div

中

以下是我的尝试：

函数addItemPrice（）{
toAppendId=document.getElementById（“personExtras0”）；
var newItemPrice=document.createElement（“div”）；
newItemPrice.className=“行”；
newItemPrice.innerHTML=”\
\
"+
""
+""+
""
+""
+""
""+
""+
+"\
";
var元素=document.getElementsByClassName（“col”）[0]；
var高度=元素。偏离视线；
//警戒（高度）；
var newHeight=高度+40；
element.style.height=newHeight+“px”；
toAppendId.appendChild（newItemPrice）；
}

标题{
文本对齐：居中；
}
.添加用户部分{
文本对齐：居中；
左侧边缘：15em；
}
.添加用户节>.row>.col{
边框：1px纯黑；
左缘：38%；
边缘顶部：2米；
背景色：rgb（223219219）；
}
#添加用户部分表单{
垫面：1米；
垫底：2米；
}
#getNumberOfUsers{
边缘底部：1米；
高度：4em；
宽度：5em；
边缘顶部：1米；
左边距：3em；
右边距：3em；
文本对齐：居中；
}
#添加用户部分表单>按钮{
边界半径：0；
}
#比尔的名字{
宽度：15em；
高度：2米；
左：1米；
边缘底部：2米；
}
/*用户项目消耗部分*/
.用户项目消耗部分{
边缘顶端：5em；
左边距：10em；
}
上校{
边框：1px纯黑；
边缘底部：3em；
高度：20em；
宽度：5em；
}
表单>.row{
边缘底部：5em；
}
.表格组{
边界半径：0；
-webkit外观：无；
}
.项目名称{
左边距：0em；
}
.人名{
边缘顶部：1米；
}
.另外{
边框：1px纯黑；
左边距：1米；
页边顶部：0em；
文本对齐：居中；
填充：0.5em；
}
.另外：悬停{
背景色：黑色；
}
.减去{
边缘顶部：1米；
边框：1px纯黑；
}
personExtras先生{
左：1米；
}
.personExtras>.row{
边缘底部：2米；
}

用户输入页
票据分割




你好

如果CSS设置正确，则无需手动设置高度，因为长方体应拉伸其子体的大小。我已尝试修复导致您出现问题的原因，但很抱歉，工作量太大

因此，我尝试重新创建一个简化版本，该版本演示了不需要设置高度，但应该让文档流和CSS完成它的工作

我还注意到，在HTML中使用了大量的

id

，在添加新元素时也是如此

id

必须是唯一的，否则它们没有用途，实际上是无用的。如果您有相同样式的元素，请考虑使用<代码>类< /代码>。< /P> 如果表单中有多个

输入

元素具有相同的

名称

属性，请确保在名称的值后附加

[]

。例如：

name=“firstname”

应该是

name=“firstname[]”

。这使表单能够创建值组。否则，

firstname

值将在表单中用该名称覆盖每个

input

小心你的引导布局<代码>列类应直接放入

行

，而

行

应仅将

列

类作为直接子类。如果使用

col-sm-6

并在该列中使用另一个

col-sm-6

，则会得到

col-sm-3

的宽度。这将使您的布局难以使用。仅当需要创建列时才尝试使用这些类

防止覆盖引导的CSS或直接修改引导的类。这将在项目中创建意外行为，例如列大小不正确。 相反，使用修改器类来增强元素上的CSS，但不会覆盖引导的默认CSS。或者制作一个新的

div

或任何您需要的内容，并在不影响现有样式的情况下为其编写自己的CSS

我理解你们仍在学习，我在这里指的是建设性意义上的一切。坚持下去，继续练习。你会