javascript - 小屏幕上的 Javascript DOM offsetHeight 问题

Question

我有一个简单的代码来将一列id="colLeft"的高度设置为另一列的高度，id="colRight"没有填充或边框：

<script type="text/javascript">
    var colLeft = document.getElementById("colLeft");
    var colRight = document.getElementById("colRight");
    colLeft.style.height = colRight.offsetHeight + "px";
</script>

此代码在台式机和 iPad 上运行良好，但在我的 android 手机上，结果相当不可预测。有时 colLeft 更长，有时 colRight ，有时它按应有的方式工作。我已经在两个浏览器上尝试过，结果相同。

我也在里面尝试过window.onload=function(){...}，结果的差异略小，但仍然不完美。

谢谢你的帮助。

Answer 1

你可以在这里阅读一些关于 offsetHeight 的信息。需要注意的重要一点是，如果内容大于可视区域，浏览器可能会使用非滚动元素做一些有趣的事情。因为这是一个手机浏览器，我猜问题是它计算错误的列高，因为它没有正确处理滚动元素。

你如何设置第一列的高度？如果它在样式表中设置了有效的高度，您可以轻松地执行以下操作：

colLeft.style.height = colRight.style.height;

如果这不起作用，您可能需要根据浏览器窗口大小设置列高，例如：

    colLeft.style.height = colRight.style.height = (window.innerHeight - 10) + "px";

或类似的东西。