jquery - IE 和调整 window.resize 上的 div

Question

我使用基础 CSS ( http://foundation.zurb.com/index.html ) 并且我的布局全部完成。它是整页响应式的。

我最大的问题是响应式 DIV 背景图像和高度。基本上，我有一个全宽行，在其中，我有一个分成 2 (50/50) 的嵌套行。示例:

<div class="row"><!-- full row -->
  <div class="large-6 columns bgimg resizeit">row one with BG image</div><!-- left box -->
  <div class="large-6 columns setboxtall"> <!-- right box -->

    <!-- MSG-MSG -->
    <div class="valignmiddle center-it">
      <p>EVENTS | EL PASO</p>
      <h2>Event one</h2>
      <h3>MAY 26 - 27, 2014</h3>
      <hr class="block-divider" />
      <h4> Neque porro quisquam </h4>
    </div>
    <!-- MSG-MSG --> 

  </div>
</div>

现在，为了在左侧框中看到背景图像，我需要一种方法将其调整为右侧框的高度。

所以我有一个 jquery 脚本可以做到这一点:

var resizeDiv = function () {
var maxHeight = 0;

  $(".setboxtall").each(function(){
     if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
  });

  $(".resizeit").height(maxHeight);

};

$(document).ready(resizeDiv);
$(window).resize(resizeDiv);

这基本上是遍历代码，查找名为 setboxtall 的类，然后将那个高度应用到名为 resizeit 的 div。

我正在使用 backstretch ( http://srobbin.com/jquery-plugins/backstretch/ ) 来应用 BG 图像。效果很好。

<script>$(".bgimg").backstretch("img/background/indian.jpg");</script>

这在 Firefox、Chrome 和 Safari 中运行良好。但是，在调整浏览器大小之前，IE 不会用背景图像填充 div。一旦我调整 IE 的大小，哪怕是最微小的一点，它都可以工作。

如何在 IE 中加载页面时让背景图像出现在该 div 中(顺便说一句，我使用的是 IE10)。

我尝试了各种方法，我的问题与 JS 和 div 和浏览器的调整大小事件无关。

如果有更好的处理方法，请说明。

我还应该提一下，一个页面上有 2-6 个这样的实例。所以我需要能够针对特定的 div 类。 (高度是动态的，基于右侧框中的文本量)

谢谢

Answer 1

我不能直接提供帮助，因为我没有太多使用 Jquery 进行响应的经验，但 Foundation 确实有一个内置的插件，可以使 div 保持相同的高度。

我认为这是在 Foundation 的最近更新中添加的，因此您可能需要更新才能使用它 http://foundation.zurb.com/docs/components/equalizer.html