Javascript Div在用户单击内容时更改高度

我对div元素的上升高度有问题。要查看该问题，您必须插入新元素“法律案例框”。然后您必须单击右上div/左上div。您可以键入1个字母，然后将其删除（或者只需设置焦点并将其删除）->您可以看到div元素的上升。我不明白为什么会这样。对不起，我的英语不好。谢谢

我还注意到，如果不注释

innerDiv1.setAttribute（“数据文本”，“案例全名”）

Safari浏览器中出现It问题。


[contentEditable=true]：空：不（：焦点）：在{
内容：属性（数据文本）
}
.盒装{
保证金：5px；
边框：2件纯黑；
最大宽度：计算（100%-10px）；
}
.内联{
显示：内联块；
垂直对齐：中间对齐；
最大宽度：计算（100%-10px）；
}
.divTable{
显示：表格；
边界塌陷：分离；
边界间距：5px；
}
迪夫罗先生{
显示：表格行；
}
divCell先生{
显示：表格单元格；
边框：2件纯黑；
}

函数插入（elem）{
document.getElementById（“mainDiv”）.focus（）；
var sel=window.getSelection（）；
var范围=选择范围（0）；
range.insertNode（elem）；
}
函数legalCaseBox（）{
var innerDiv1=document.createElement（'div'）；
innerDiv1.contentEditable='true'；
innerDiv1.style.minWidth='50pt'；
innerDiv1.style.minHeight='50pt'；
innerDiv1.classList.add（'divCell'）；
//innerDiv1.setAttribute（“数据文本”、“案例全名”）；
var innerDiv2=document.createElement（'div'）；
innerDiv2.contentEditable='true'；
innerDiv2.style.minWidth='50pt'；
innerDiv2.style.minHeight='50pt'；
innerDiv2.classList.add（'divCell'）；
innerDiv2.setAttribute（“数据文本”、“年份”）；
var firstDiv=document.createElement（'div'）；
firstDiv.contentEditable='false'；
firstDiv.classList.add（'divTable'）；
var rowDiv=document.createElement（'div'）；
rowDiv.classList.add（'divRow'）；
rowDiv.appendChild（innerDiv1）；
rowDiv.appendChild（innerDiv2）；
firstDiv.appendChild（rowDiv）；
var secondDiv=document.createElement（'div'）；
secondDiv.style.minWidth='150pt'；
secondDiv.style.minHeight='80pt'；
secondDiv.contentEditable='true'；
secondDiv.classList.add（'boxed'）；
secondDiv.setAttribute（“数据文本”、“案例摘要”）；
var div=document.createElement（'div'）；
div.contentEditable='false'；
div.classList.add（'inline'）；
div.classList.add（'boxed'）；
第二分区（第一分区）；
第二分区（第二分区）；
插入（div）；
}
法律箱
观察
第一个div为空，因此其高度小于第一个div，并且
year
div的高度大于第一个div，因此当单击第一个div时，它不会最小化，因为由于文本原因，year div具有一些最小高度。
当你点击year div时，第一个div是空的，并且高度较小，所以在你输入之前，你的year div是最小化的

如果您不想对以上行进行注释，请尝试向每个div添加
height
，
人让人活着。。。当sm1创建fiddle时，有人说要使用SO代码段，当这样做时，有人需要fiddle..我在尝试运行代码时出错：''IndexSizeError:未能在'Selection'上执行'getRangeAt'：0不是有效的索引''（Chrome 42）我正在获取未捕获的索引XsizeError:未能对“Selection”执行“getRangeAt”：0不是有效的索引。error@Arun我添加了聚焦功能，现在试试：）谢谢你的回答！我不想取消对该行的注释，但我也不想有div元素的静态高度。我想动态改变高度。你能帮助我吗？我真的不知道如何解决这个问题。只需将高度添加到
.divTable
。喜欢输入一些数据，请参见，div的高度会发生变化。如果这有帮助的话，我会更新我的帖子，只要我能点击第二个div，然后点击另一个区域，然后再次点击第二个div。我看到一个大高度的空沙发。抱歉我的愚蠢，但我真的不明白：（这是意料之中的。你到底想要达到什么？正如你所看到的，当我点击第一个div（左上div），然后点击另一个区域div时，div没有上升，但第二个div（右上）在这种情况下上升。它们之间的区别是“占位符”（innerDiv1.setAttribute（“数据文本”），“案件全名”）。所以我想说的是，当我像第一部一样关注/关闭第二部时，第二部不会上升。我希望你们明白我想要什么。