Question

如何使用jQuery设置.inner-wrap div的css min-height以匹配窗口高度？我需要它在文件加载和窗口调整大小上运行吗？

$(window).resize(function() {

$('.inner-wrap').height ( $(window).height() );

});

Answer 1

使用.css()方法，如下所示：

$('.inner-wrap').css("height", $(window).height() + "px" );

或min-height：

$('.inner-wrap').css("min-height", $(window).height() + "px" );

每次调整窗口大小时设置css都会导致性能问题。因此，使用一个小技巧：

// short for $(document).ready()
$(function() {
    var timer;

    $(window).resize(function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            $('.inner-wrap').css("min-height", $(window).height() + "px" );
        }, 40);
    }).resize();
});

此代码完全正确;

文档一加载，就会开始添加所有功能。它创建一个空变量“timer”，稍后将用作超时包装函数。然后它将resize事件添加到窗口并立即在窗口对象（...resize();）上调用它，这会导致函数在开头运行。在函数内有一个超时处理，确保只有在用户停止调整窗口很短的时间后才会应用css。你可以玩40（ms）的整数。希望有所帮助

Answer 2

$('.inner-wrap').css("min-height", $(window).height() + "px");

如何使用jQuery设置min-height与window相同

2 个答案: