Javascript 插入的DOM内容不显示在Chrome中，且不调整大小

这件事把我难住了。我有三列使用div和表布局，所有列的高度都为100%。当我动态地将包含换行div的内容插入其中一列时，除非调整浏览器窗口的大小，否则Chrome不会显示新内容，换行div的位置为

position:relative

，然后是

position:absolute

。在调整大小之前，似乎外层包装的高度设置为0。IE和Firefox按预期工作（内容立即显示）

更新：我还将添加与

滚动包装器

上设置的

溢出：隐藏

样式相关的内容-如果将其删除，它在Chrome中也可以正常工作

下面是一个关于CodePen的运行示例：

这里还嵌入了完整的代码（尽管在StackOverflow上运行时，您似乎需要使用“Full Page”选项才能真正看到行为-它在CodePen中以任意大小复制）：

$（文档）。在（“单击”、“.col1链接”上，函数（）{
$（“#col2”）.html（'\
\
可乐\
\
');
});
html，正文{
身高：100%；
溢出：隐藏；
}
.table div{
显示：表格；
宽度：100%；
}
.表格行{
显示：表格行；
宽度：100%；
}
.表格单元格{
显示：表格单元格；
浮动：无；
填充：0；
垂直对齐：顶部；
}
.全高{
身高：100%；
}
.相对包装{
位置：相对位置；
身高：100%；
}
.滚动包装器{
溢出：隐藏！重要；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
}
#可乐{
宽度：15%；
}
#可乐{
宽度：25%；
填充：0；
}
#可乐{
宽度：60%；
}

点击后，“Col2”只在Chrome上调整窗口大小后才可见，但在IE和Firefox中工作正常
您可以通过将“overflow:auto”设置为“relative wrapper”css类或将绝对位置的“scroll wrapper”更改为相对来解决高度问题

我不确定这是否是最好的解决方案。
有几种不同的解决方案。出于某种原因，它与表格显示以及chrome如何计算表格单元格的高度有关（或与否）。您可以关闭表格显示，我假设您不想这样做，也可以使用javascript函数触发高度重新计算


$（文档）。在（“单击”、“.col1链接”上，函数（）{
$（“#col2”）.html（'\
\
可乐\
\
身高(0),；
});
html，正文{
身高：100%；
溢出：隐藏；
}
.table div{
显示：表格；
宽度：100%；
}
.表格行{
显示：表格行；
宽度：100%；
}
.表格单元格{
显示：表格单元格；
浮动：无；
填充：0；
垂直对齐：顶部；
}
.全高{
身高：100%；
}
.相对包装{
位置：相对位置；
身高：100%；
}
.滚动包装器{
溢出：隐藏！重要；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
}
#可乐{
宽度：15%；
}
#可乐{
宽度：25%；
填充：0；
}
#可乐{
宽度：60%；
}

点击后，“Col2”只在Chrome上调整窗口大小后才可见，但在IE和Firefox中工作正常
他已经有了这个解决方案，只是在寻找它为什么会发生的答案。@Chad-实际上我没有尝试添加
overflow:auto到外部
相对包装器
类，它确实解决了这个问题（尽管在我的实际案例中引入了一些其他问题）。虽然你是对的，我主要是在寻找发生这种情况的“原因”，但我感谢你的建议。我当然不认为应该投反对票。@somedave我以为是在你的帖子里你试过了，然后它就解决了chrome@Chad我曾尝试删除
滚动包装上的
溢出：隐藏
，我没有想到要更改
相对包装的
溢出
。我会修改这个问题，让它更清楚。看起来chrome在认为必须重新计算高度之前不会费心重新计算高度。你可以稍微修改一下，然后说
$（'#col2'）.html（…）.height（0），这将使浏览器重新计算高度。@Chad-您似乎了解了一些信息。有趣的是，一旦它计算了一次高度，它就再也不需要这样做了，即使在随后的大小调整或额外的DOM插入之后也是如此。这就好像Chrome需要一个很好的提示来告诉它特定的元素可能会改变大小。我认为这只是某种表格显示错误。如果你用
display:inline block
而不是
display:table cell
来研究这个问题，它的计算很好：@Chad我想你已经了解了它的要点。如果你写下你的评论作为回答，我会接受的。