Question

我有3列延伸到相等的高度

这是使这三列有效的JS：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>

问题是这只有在刷新页面时才有效。有时我甚至需要刷新页面几次以使其工作。有什么方法可以解决这个问题吗？谢谢！

这是我的JS结构：

<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

如果根据您的评论，您需要IE8 +支持，让我们尝试解决您的问题纯HTML方式，不需要JS !! ：）

demo here

从代码中删除所有JS和float，然后查看以下标记中的注释：

#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 */
    }

修改

如果根据评论您的标记中有图像，请务必提及：

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();
    }
}

此代码段重新加载您的步伐

Answer 3

这是因为您在加载图像之前触发了脚本，因此您无法知道 #wrapper 的真实 innerHeight 。

您可以选择指定DOM上的图像高度

OR

在onLoad窗口上触发此功能。

此外，您不需要$ .each：

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

优化方式（缓存包装器）：

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

出现问题是因为您的元素正在浮动，因此DOM不会将它们视为实体对象。

您需要对CSS进行一些修改才能解决问题。

#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;
}

对于jQuery方面，您需要将其更改为：

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');
});

如果你想尝试一下。

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

4 个答案: