Question

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

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

我试过了：

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

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

并使每个div id为“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。如果您使用ID，则只有第一个将全屏显示。如果你必须使用id（这很难看），最简单的方法就是：

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

动态调整堆叠div的高度？

1 个答案: