Question

这个让我难过。我有三列使用具有表格布局的div，所有列都具有100％的高度。当我将包含带有position: relative和position: absolute包装div的内容动态插入其中一列时，除非调整浏览器窗口大小，否则Chrome不会显示新内容。看起来好像外部包装器设置为0高度，直到调整大小。 IE和Firefox按预期工作（内容立即显示）。

更新：我还会添加它与overflow: hidden上设置的scroll-wrapper样式相关 - 如果删除它也可以在Chrome中正常使用。

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

这里也嵌入了完整的代码（虽然看起来你需要在StackOverflow上运行时使用“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

有几种不同的解决方案。由于某种原因，它与表格显示有关，以及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正确地重新计算高度。

Answer 2

您可以通过设置＆溢出：自动＆＃39;来解决身高问题。到你的亲戚包装＆＃39; css类或改变绝对定位的滚动包装＆＃39;亲戚。

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

插入的DOM内容未在不调整大小的情况下显示在Chrome中

2 个答案: