已插入 DOM 内容未在 Chrome 中显示且未调整大小

Question

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

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

这是 CodePen 上的运行示例：http://codepen.io/anon/pen/raqJEz

这里也嵌入了完整代码（尽管在 Whosebug 上运行时，您似乎需要使用 "Full Page" 选项才能真正看到行为 - 它以任何大小在 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

您可以通过将 'overflow:auto' 设置为 'relative-wrapper' css class 或将绝对定位 'scroll-wrapper' 更改为相对定位来解决高度问题。

我不确定这是否是最好的解决方案。

Answer 2

有几种不同的解决方案。出于某种原因，它与 table 显示以及 chrome 如何计算 table 单元格的高度（或不计算）有关。您可以关闭 table 显示，我假设您不想这样做，或者您可以使用 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>

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

已插入 DOM 内容未在 Chrome 中显示且未调整大小

Inserted DOM Content Not Displaying In Chrome Without Resize

javascript

html

css

google-chrome

dom