动态调整堆叠div的高度？

Question

在我的magento主页上，我有一个部分，我有3个图像拼贴堆叠在一起。

我喜欢它，以便每个“拼贴”/ div动态调整其高度，使其与您打开的浏览器的高度相同，这样当您向下滚动时，每个窗口都能完美地适应窗口。

我想：

<script type="text/javascript"> 
$(window).resize(function() { 
$('#universe1').height($(window).height() - 46); 
}); 

$(window).trigger('resize'); 
</script> 

，让每个DIV id'd “universe1”，但似乎并没有这样的伎俩。

任何想法？

Answer 1

使用jquery的.on（）方法来附加您的事件处理程序。

<!-- HTML --> 
<div class="universe">1</div> 
<div class="universe">2</div> 
<div class="universe">3</div> 

// jQuery 
$(window).on('resize', function() { 
    $('.universe').height($(window).height() - 46); 
}); 

$(window).trigger('resize'); 

工作例如：http://jsbin.com/IFEPEkaY/1/

另外，还要确保你在上面，而不是ID，如在代码中使用的类作为例子。如果您使用ids，只有第一个会全屏显示。如果必须使用IDS（这是丑陋的）最简单的事情就是这样：

<!-- HTML --> 
<div id="universe1">1</div> 
<div id="universe2">2</div> 
<div id="universe3">3</div> 

// jQuery 
$(window).on('resize', function() { 
    $('#universe1').height($(window).height() - 46); 
    $('#universe2').height($(window).height() - 46); 
    $('#universe3').height($(window).height() - 46); 
}); 

$(window).trigger('resize'); 

工作例如：http://jsbin.com/eboXAXEq/1