I have 3 columns that extend to equal height

and this is the JS that makes those 3 columns work: [SEE DEMO](http://jsfiddle.net/5NN8g/)

```
<script>
  $(document).foundation();
</script> 
<script>
   if(!(/iPhone|iPad|iPod|Android|webOS|BlackBerry|Opera Mini|IEMobile/i.test(navigator.userAgent) )) {
jQuery(document).ready(function($){
    var inHeight = $("#wrapper").innerHeight();
    $("#wrapper .col").each(function(){
        $(this).height(inHeight+"px");
        $(this).find('.content').height((inHeight-60)+"px");
    });
}); 
}
</script>

```

The problem is that this only works when I refresh the page. Sometimes I even need to refresh the page a couple of times to make it work. Is there any way to fix this issue? Thanks!

This is my JS structure:

```
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="js/modernizr.js"></script>
<script src="js/foundation.min.js"></script> 
<script>
  $(document).foundation();
</script> 
<script>
   if(!(/iPhone|iPad|iPod|Android|webOS|BlackBerry|Opera Mini|IEMobile/i.test(navigator.userAgent) )) {
jQuery(document).ready(function($){
    var inHeight = $("#wrapper").innerHeight();
    $("#wrapper .col").each(function(){
        $(this).height(inHeight+"px");
        $(this).find('.content').height((inHeight-60)+"px");
    });
}); 
}
</script> 

```