Question

考虑这个例子：

jQuery(document).ready(function($){

    function elementHeight() {

        // Get height of the browser viewport
        var windowH = $(window).height();

        // Set element's height (i.e. #elementID) equal to
        // that of the browser's viewport
        $('#elementID').height(windowH+'px');
    }

    elementHeight();

    // Make sure the height is recalculated and set on the
    // element when the browser is resized
    $(window).resize(function() {
        elementHeight();
    });

});

上面的代码设置元素#elementID的高度，使其等于浏览器视口的高度。

但浏览器的视口大小会在调整大小时发生变化，理想情况下，该元素的高度也应如此。所以，我希望代码也改变#elementID的高度，使其始终等于浏览器的视口，即使用户调整浏览器的大小。

我尝试使用.resize()事件，正如您在上面的代码中看到的那样，但我似乎做错了。

因为不是替换元素的高度（最初是在第一次运行代码时计算的），所以每次调整浏览器大小时，高度都会不断加起来（x + y + z + ...），元素的高度越来越大。

我做错了什么？它应该怎么做？

注意：我也试过这些而不是$('#elementID').height(windowH+'px');

$('#elementID').css('height',windowH+'px');

$('#elementID').attr('style', 'height:'+windowH+'px;');

他们没有任何区别。

Answer 1

试试这个：

$('#elementID').height(windowH);

如果你想添加px，我认为应该如何做：

$('#elementID').css('height',windowH + 'px');

我会建议使用.css，因为它更快：）

Answer 2

在jQuery中，您可以执行类似

的操作

function checkResizeAndReady() {
   var windowHeight = $(window).height();
   $('#height').css('height', windowHeight + "px");
}

$(window).on("resize", checkResizeAndReady);
$(document).on("ready", checkResizeAndReady);

http://codepen.io/RobErskine/pen/efEGc/

或者相反，你可以使用CSS：

body,html{
   display:block;
   width:100%;
   height:100%;
   margin:0;
}

#filler{
    height:100%;
    background-color:red;
 }

http://codepen.io/RobErskine/pen/aezkG/

使用jQuery动态设置元素的高度;如何在.resize（）事件上重置高度？

2 个答案: