JS仅在刷新页面几次时有效

Question

I have 3 columns that extend to equal height

and this is the JS that makes those 3 columns work: SEE DEMO

<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> 

Answer 1

If as per your comment, you need IE8+ support, lets try solving your problem pure HTML way, no JS required !! :)

demo here

Remove all the JS and float from your code, then, see the comments in markup below :

#wrapper {
    height: 100%;
    width:  100%;
    margin: 20px auto;
    display:table; /* added, so your div will behave like css-table */
    overflow: hidden;
}
#wrapper > .col {
    display: table-cell; /* abra-ka-dabra, equal height for all divs!!*/
    width: 30.3%;
    border:1px solid red;
    margin: 0 15px 3px;
    background-color: #fff;
    text-align: center;
    position: relative; /* required, because we need to place button @ he bottom of div*/
    height: 100%;
    -moz-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
    -webkit-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
    box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
}

    div.btn-align-bottom {
        position:absolute; /* place button at the bottom of div */
        bottom:50px; /* placing at proper position */
        left:0; /* needed for centering */
        right:0;/* needed for centering */
        border:1px solid yellow /* just to show you */
    }

EDIT

If as per comment you have image in you markup,make sure to mention :

img{
    vertical-align:top; /* change default of baseline to top*/
}

working demo

Answer 2

window.onload = function() {
    if(!window.location.hash) {
        window.location = window.location + '#';
        window.location.reload();
    }
}

This snippet reloads your pace once

Answer 3

This happens because you are triggering your script before the images are loaded, so you cannot know the real innerHeight of #wrapper .

You options are specifying the image height on the DOM

OR

Triggering this function on window onLoad.

Also, you don't need $.each:

var inHeight = $("#wrapper").innerHeight();
$("#wrapper .col").css("height", inHeight+"px");
$("#wrapper .col .content").css("height", (inHeight-60)+"px");

An optimized way (caching wrapper):

var $wrapper = $("#wrapper");
var inHeight = $wrapper.innerHeight();
$wrapper.find(".col").css("height", inHeight+"px");
$wrapper.find(".col .content").css("height", (inHeight-60)+"px");

Answer 4

The problem occurs because your elements are being floated and therefore the DOM doesn't see them as solid objects.

You'll need to make a couple of edits to the CSS to fix the problem.

#wrapper {
    height: 100%;
    width: 100%;
    margin: 20px auto;
    overflow: auto;
}

#wrapper > .col {
    display: inline-block;
    float: left;
    width: 30.3%;
    margin: 0 15px 3px;
    background-color: #fff;
    text-align: center;
    position: relative;
    height: 100%;
    -moz-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
    -webkit-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
    box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
    overflow: auto;
}
#wrapper > .col > .content {
    padding: 0 0 35px;
    overflow: auto;
}

And for the jQuery side of it, you'll need to change it to this:

var inHeight = $("#wrapper").innerHeight();
$("#wrapper .col").each(function(){
    $(this).height(inHeight+"px").css('overflow', 'hidden');
    $(this).find('.content').height((inHeight-60)+"px").css('overflow', 'hidden');
});

If you want to give that a try.