Elegant approach to keeping a div's height synced to another's
<p>CoffeeScript:</p>

<pre><code>$(window).on("deviceorientation", -&gt;
    if($(window).width() &gt; $(window).height()) # Landscape mode
        height = $(".infoContainer").offset().top + $(".infoContainer").height();
        $("#map_canvas").height(height);
        $(".uiContainer").height(height);
    else
        $("#map_canvas").height($(window).height());
        $(".uiContainer").height($(window).height());
    )
</code></pre>

<p>This code works fine (on mobile only, which is the only meaningful target for this code to run on so that's good) but it fires way too fast so it slows down the experience a bit noticeably (On a dual-core Xperia S, dont want to imagine the effect on lower-end phones) so i want to know if there is a more elegant (CSS preferred) way to deal with this issue.</p>
