Question

我有以下脚本可以正常刷新页面但我希望能够动态获取已调整大小的窗口的大小而不刷新页面并将相应的高度应用于某个部分。

var w = $(window).width();
var h = $(window).height();

$('section').height(h);

我错过了哪些让它更动态地运作？

Answer 1

尝试以下操作，每次加载或调整窗口大小时都会调用该函数：

$(window).on('load resize', function(){
    var w = $(window).width();
    var h = $(window).height();

    $('.section-content').height(h);
});

您在评论中确认section实际上应该是.section-content。

JSFiddle

Answer 2

$(window).resize(function(){
    var w = $(window).width();
    var h = $(window).height();
    $('.section-content').height(h);
});

Answer 3

尝试在窗口调整大小时设置高度宽度。

<强> Window resize height/width change Fiddle

<强> Jquery的：

$(window).on('resize', function(){
var h=($(window).height();
var w=$(window).width();
$('.section-content').height(h);
});

Answer 4

function setToWinSize(){
    var win = $(window);
    $('section').width(win.width()).height(win.height());
}

$(function(){        // on DOM ready

  setToWinSize();    

  $(window).resize(function(){
     setToWinSize();
  });

});

jQuery - 在窗口大小调整时调整元素高度以匹配窗口而不刷新

4 个答案: