javascript - 插入的 DOM 内容在没有调整大小的情况下不显示在 Chrome 中

Question

这个让我难住了。我有三列使用 div 和表格布局，高度均为 100%。当我动态地将包含包装 div 的内容插入 position: relative 然后将 position: absolute 插入其中一列时，Chrome 不会显示新内容，除非浏览器窗口调整大小。在调整大小之前，外包装似乎设置为 0 高度。 IE 和 Firefox 按预期工作(内容立即显示)。

更新:我还将添加它似乎与 scroll-wrapper 上设置的 overflow: hidden 样式相关 - 如果删除它，它在 Chrome 中也能正常工作。

这是一个在 CodePen 上运行的例子:http://codepen.io/anon/pen/raqJEz

这里也嵌入了完整的代码(虽然看起来您需要在 StackOverflow 上运行时使用“整页”选项才能真正看到行为 - 它以任何大小在 CodePen 中复制):

$(document).on("click", ".col1-link", function () {
  $("#col2").html('<div class="relative-wrapper"> \
        <div class="scroll-wrapper"> \
          Col2 \
        </div> \
      </div>');
});

html, body {
  height: 100%;
  overflow: hidden;
}
.table-div {
  display: table;
  width: 100%;
}
.table-row {
  display: table-row;
  width: 100%;
}
.table-cell {
  display: table-cell;
  float: none;
  padding: 0;
  vertical-align: top;
}
.full-height {
  height: 100%;
}
.relative-wrapper {
  position: relative;
  height: 100%;
}
.scroll-wrapper {
  overflow: hidden !important;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#col1 {
  width: 15%;
}

#col2 {
  width: 25%;
  padding: 0;
}

#col3 {
  width: 60%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-div full-height">
  <div class="table-row full-height">
    <div id="col1" class="table-cell full-height">
      <a class="col1-link" href="#">Click Here</a>
    </div>
    <div id="col2" class="table-cell full-height">
    </div>
    <div id="col3" class="table-cell full-height">
      After click, "Col2" will only be visible after resizing the window on Chrome, but works fine in IE and Firefox
    </div>
  </div>
</div>

知道为什么会发生这种情况吗？

Answer 1

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

$(document).on("click", ".col1-link", function () {
  $("#col2").html('<div class="relative-wrapper"> \
        <div class="scroll-wrapper"> \
          Col2 \
        </div> \
      </div>').height(0);
});

html, body {
  height: 100%;
  overflow: hidden;
}
.table-div {
  display: table;
  width: 100%;
}
.table-row {
  display: table-row;
  width: 100%;
}
.table-cell {
  display: table-cell;
  float: none;
  padding: 0;
  vertical-align: top;
}
.full-height {
  height: 100%;
}
.relative-wrapper {
  position: relative;
  height: 100%;
}
.scroll-wrapper {
  overflow: hidden !important;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#col1 {
  width: 15%;
}

#col2 {
  width: 25%;
  padding: 0;
}

#col3 {
  width: 60%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-div full-height">
  <div class="table-row full-height">
    <div id="col1" class="table-cell full-height">
      <a class="col1-link" href="#">Click Here</a>
    </div>
    <div id="col2" class="table-cell full-height">
    </div>
    <div id="col3" class="table-cell full-height">
      After click, "Col2" will only be visible after resizing the window on Chrome, but works fine in IE and Firefox
    </div>
  </div>
</div>

现在，因为它是一个表格显示，将高度设置为 0 实际上应该不会影响元素的高度，但会导致 chrome 重新正确计算高度。