google chrome returns wrong window height?

Question

hi,

i have been working on this script http://www.acgunsdcroses.com/agencymeter/. it seems like only google chrome is returning a wrong window height and thus sets the height of the divs wrong, leaving a white space between the red and blue divs. strangely enough this only happens when you load the page for the first time in a new window/tab, upon reload it works fine.

can you guys reproduce this and do you have any idea what i could do about this?

thanks!

Answer 1

This doesn't really answer your question about a Google Chrome bug, but this is my recommendation for your particular situation:

I would use CSS instead of setting the page up with JavaScript:

EXAMPLE

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; }

UPDATE

You could still play with the split ratio using JavaScript, but it would always fill the screen, even if the calculations are 2 or 3 pixels off from what you ideally wanted:

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%