动态调整堆叠div的高度？答案

【问题标题】：Dynamically resize height of stacked divs?动态调整堆叠div的高度？
【发布时间】：2014-01-28 23:18:59
【问题描述】：

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

我希望每个“拼贴”/div 都能根据您打开它的浏览器动态调整其高度，这样当您向下滚动时，每个“拼贴”/div 都可以完美地适应窗口。

我试过了：

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

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

并让每个 div 都设置为“universe1”，但这似乎没有奏效。

有什么想法吗？

【问题讨论】：

我认为你必须为此使用砌体脚本
对于一个页面，每个 id 必须是唯一的。 make each div id'd "universe1" 是什么意思？

标签： javascript jquery magento resize height

【解决方案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

【讨论】：