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

标签 javascript html css google-chrome dom

这个让我难住了。我有三列使用 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>

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

最佳答案

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

关于javascript - 插入的 DOM 内容在没有调整大小的情况下不显示在 Chrome 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29013035/

相关文章:

javascript - Fabricjs Canvas 有时会错误地加载对象?

javascript - 带有 bootstrap 的 Smoothie 图表

javascript - 如何打开 div 并使消息可读?

javascript - Gridstack:将小部件从一个网格拖到另一个嵌套的网格中

javascript - 使用 jquery 分离/附加选择选项

javascript - Meteor 方法回调结果未定义

java - Thymeleaf 隐藏输入值始终为 null

python - 通过 html 发布 pandas 数据透视表

html - 缩小语义 UI 中的所有站点

javascript - 有没有办法告诉页面已经滚动到某个div?