Problem with height of a page in browsers

[emulman]

Using JQuery and CSS with javascript happens a very strange thing...i'm doing a site where every page has 5 DIV in vertcal, called "div1", "div2" and so on. Every page can have a different height, so i use the following script:

<script type="text/javascript">
    $(document).ready(function() {
      var sH = $(document).height() + 'px';
      for (i=1; i<6; i++)
         document.getElementById("div"+i).style.height = sH;
    });
</script>

the strange is that every browser shows different height for the same page! i have inserted an alert to see the sH value on the same page and this is the result:

Chrome: 1713px
Safari: 1717px;
Firefox: 1102px;
Opera: 1097px;
Explorer: 1574px;

the fact is that the DIVs in Firefox for example are interrupted at half the page...why?

[twiss]

Maybe you should just give the div's 100% height? (Could also try a search for that; css 100% heigth layout/div or something like that.)

[emulman]

yes, in a CSS file i have put both height: 100%; and min-height: 100%; because as i said before every page i open can have an height > 100%, so i thought to apply to every DIV the height of the entire document $(document).height()