Javascript DOM 偏移小屏幕上的高度问题

Javascript DOM offsetHeight issue on small screens

本文关键字：高度 问题 屏幕 DOM Javascript      更新时间：2023-09-26

我有一个简单的代码来设置一列的高度，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(){...} 中尝试过，结果的差异略小，但仍然不完美。

感谢您的任何帮助。

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

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

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

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

，如下所示： 
    colLeft.style.height = colRight.style.height = (window.innerHeight - 10) + "px";

或类似的东西。

相关文章：