javascript - 谷歌浏览器返回错误的窗口高度？

Question

我一直在研究这个脚本http://www.acgunsdcroses.com/agencymeter/ 。似乎只有 google chrome 返回了错误的窗口高度，因此将 div 的高度设置错误，在红色和蓝色 div 之间留下了空白。奇怪的是，这只发生在您第一次在新窗口/选项卡中加载页面时，重新加载后它工作正常。

你们能重现这个吗？你们知道我能对此做些什么吗？

谢谢!

Answer 1

这并不能真正回答您有关 Google Chrome 错误的问题，但这是我针对您的特定情况的建议:

我会使用 CSS 而不是使用 JavaScript 设置页面:

示例

Example on JSBin

HTML

<div id="received">27 Emails received since Wed, 06 Jan 2010 05:00:05</div>
<div id="sent">10 Emails sent since Wed, 06 Jan 2010 05:00:05</div>

CSS:

html, body { height: 100%; width: 100%; position: relative; margin: 0; padding: 0 }

#received, #sent { position: absolute; left: 0; width: 100%; }
#received { top: 0; bottom: 200px;  background-color: #ff0000; }
#sent     { bottom: 0; height: 200px; background-color: #0000ff; }

更新

您仍然可以使用 JavaScript 来调整分流比，但它总是会填满屏幕，即使计算结果与您理想的结果相差 2 或 3 个像素:

JS

var received = document.getElementById('received'),
    sent     = document.getElementById('sent');

// Be sure to set 'sent' height to whatever you set 'received' bottom to:
received.style.bottom = "300px";
sent.style.height     = "300px";

// You should also be able to use percentages:
received.style.bottom = "30%"; // Received will occupy 70%
sent.style.height     = "30%"; // Sent will occupy 30%