谷歌浏览器错误地计算了元素的高度

【问题标题】：Google Chrome incorrectly calculates the height of the element谷歌浏览器错误地计算了元素的高度
【发布时间】：2015-03-17 07:40:56
【问题描述】：

我需要将侧边栏的高度设置为与主要内容相同，所以我写了这个：

document.querySelector('.sidebar-left').style.height = document.querySelector('.main-content').offsetHeight + 'px';

它在 Firefox 中的工作就像一个魅力，但谷歌浏览器错误地计算了 .main-content 元素的高度，因此 .sidebar-left 和 .main-content 的高度不相等。但有时当我刷新页面时，Chrome 会正确设置侧边栏的高度，然后再错误地设置。

当我使用getBoundingClientRect() 方法时也会发生同样的情况。我该如何解决这个问题？

【问题讨论】：

【解决方案1】：

我没有足够的代表发表评论，所以会在这里发帖。

我想知道您是在什么时候执行此操作的 - 您是在 document.ready 事件块中执行此操作（即当页面完全加载时）还是之前？

如果在此之前 .main-content 可能还没有正确渲染，那么获取高度将是不正确的（特别是如果您正在对其进行一些修改？）

【讨论】：

我提到在 Firefox 中没问题，所以你可以猜到脚本是在 DOM 就绪事件之后执行的。
即使在 document.ready 中，内容也可能没有完全加载（你有任何图像吗？） - 你可以检查它的 readyState 以确保。
虽然这个答案不是一个可行的解决方案，但它并不正确并且指向正确的方向，因此 +1。在挂载钩子期间计算多个元素的 offsetHeight 时，我在 Vue 应用程序中遇到了与 Chrome 相同的问题。添加超时暂时解决了这个问题，尽管我仍然需要调查此时可能无法正确渲染的内容（因为它实际上是一个 ul，其中一个 li 没有正确计算）。