JQuery div.height ошибочен в Chrome, чтобы сделать все divs одинаковой высоты

Я использовал следующий код, чтобы иметь равную высоту для rightpos, leftpos и middlepos divs:

<script>

    jQuery.noConflict();
    jQuery(document).ready(function($){

        // Find the greatest height:
        maxHeight = Math.max($('#rightpos').height(), $('#middlepos').height());
        maxHeight = Math.max(maxHeight, $('#leftpos').height());

        // Set height:
        $('#rightpos').height(maxHeight);
        $('#middlepos').height(maxHeight);
        $('#leftpos').height(maxHeight);

    })
</script>

Определение самого высокого div, использующего этот путь для главной страницы http://yaskawa.ir/, хорошо работает в Firefox, но имеет проблемы в Chrome.


ОБНОВЛЕНИЕ 1 после ответа Sparky672:

Я вижу, что с этим кодом alert('test here'); в конце не работает.

<script>
    jQuery.noConflict();
    //jQuery(document).ready(function($){});

    jQuery(window).load(function($){

        // Find the greatest height:
        maxHeight = Math.max($('#rightpos').height(), $('#middlepos').height());
        maxHeight = Math.max(maxHeight, $('#leftpos').height());

        // Set height:
        $('#rightpos').height(maxHeight);
        $('#middlepos').height(maxHeight);
        $('#leftpos').height(maxHeight);

        alert('test here');
    })
</script>

enter image description here

Ответ 1

Попробуйте window.load() вместо document.ready(), чтобы все ресурсы были загружены до того, как вы рассчитали высоту.

jQuery(window).load(function($){

Документация:

Событие загрузки отправляется элементу, когда он и все подэлементы имеют была полностью загружена. Это событие может быть отправлено на любой элемент связанные с URL: изображениями, сценариями, фреймами, iframe и оконный объект.

http://api.jquery.com/load-event/

См. DEMO:

http://jsfiddle.net/snBLP/3/

Ответ 2

$(document).ready() не подходит для вычисления высот. $(document).ready() не ждет загрузки изображений и т.д.

Я предлагаю попробовать

$(window).ready() 

вместо...