Question

我正在使用此代码调整页面上的div：

function sizeContent() {
    var newHeight = ($("html").height() - $(".header").height() -3) + "px";
    $(".content").height(newHeight);
}

我使用以下方法触发：

$(window).resize(sizeContent());

但我也称之为

$(document).ready(sizeContent());

正确设置所有高度。

如果我通过拖动边框来调整浏览器窗口的大小，那么效果很好。

但是最初的通话似乎没有任何效果。在sizeContent函数内部发出警报我可以看到它已在页面就绪时被调用，并且正在设置正确的高度，但页面上没有任何更改。

除非窗口本身已更改，否则浏览器无法识别需要重绘任何内容。

解决： 最后，不是javascript是问题，使用div显示：table和display：table-row导致了它。从css中删除了这些并且一切正常。

Answer 1

替换

$(".content").css({height:newHeight}) //replace this

带

(".content").height(newHeight);

Answer 2

// If you put your code at the bottom of the page to avoid needing`$(document).ready`, it gets even simpler:

$(window).on('resize', function () {
    var newheight = ($(window).height() - $('.header').height() - 3);
    $(".content").css("height", newheight);
}).trigger('resize');


// Another way to do that same thing

$(document).ready(sizeContent);
$(window).on('resize', sizeContent);

function sizeContent() {
  var newheight = ($(window).height() - $('.header').height() - 3);
    $(".content").css("height", newheight);
}


// Another technique is to`.trigger()`one event inside the other:

$(window).on('resize', function () {
   var newheight = ($(window).height() - $('.header').height() - 3);
   $(".content").css("height", newheight);
});
$(document).ready(function () {
   $(window).trigger('resize');
});

Answer 3

使用以下代码：

function sizeContent() {
    var newHeight = ($(window).height() - $(".header").css('height')-3) ;
    $(".content").css('height',newHeight);
}

Jquery .height（）在调整窗口大小之前无法正常工作

3 个答案: