medesima altezza per i DIV di una pagina

[emulman]

Ciao a tutti! sono uno sviluppatore di web applications in PHP-Javascript-JQuery e vorrei cercare di capire questo strano problema. In un sito che sto creando ogni pagina ha 5 DIV verticali che a seconda della pagina possono cambiare di altezza. Per cui ho provato il codice seguente:

<script type="text/javascript">
    $(document).ready(function() {
      setDivsHeight(window.document, $(document).height() + 'px');
    });

function setDivsHeight(oDoc, sH) {
  oDoc.getElementById("asfalto").style.height = sH;
  oDoc.getElementById("erba1").style.height = sH;
  oDoc.getElementById("cordolo1").style.height = sH;
  oDoc.getElementById("erba2").style.height = sH;
  oDoc.getElementById("cordolo2").style.height = sH;
}
</script>

in pratica calcolo l'altezza del documento con

$(document).height()

e la applico ai 5 DIV. purtroppo però ogni browser mostra una diversa altezza , così come segue:

Chrome 14: 1552px
Firefox 7.0.1: 1205px;
Safari 5.1: 1631px;
Opera 11.51: 1261px;
Explorer 9: 1624px;

in pratica solo Safari ed Explorer visualizzano i 5 DIV fino in fondo negli altri browser vengono tagliati molto prima! come mai?