Same height of boxes works just after refresh

Question

I Used This Script for Same Boxes Height

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js">
$(document).ready(function(){

    var highestBox = 0;
        $('.box').each(function(){  
                if($(this).height() > highestBox){  
                highestBox = $(this).height();  
        }
    });    
    $('.box').height(highestBox);

});
</script>

But actually It works a bit strange. First It loads data from Database and after that it should do that but it does not so I need to refresh the page to get the effect I used it in the header as same as in the footer. Without change any Advices what i did bad ? Page is matus-satara.com You can check it live :)

Answer 1

You can't have both a src AND actual content in the same script tag.

Separate the scripts like this:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){

    var highestBox = 0;
        $('.box').each(function(){  
                if($(this).height() > highestBox){  
                highestBox = $(this).height();  
        }
    });    
    $('.box').height(highestBox);

});
</script>

Answer 2

If you don't need to support IE9, give the parent container the style display: flex which will make all children grow to the same height. http://caniuse.com/#feat=flexbox