jQuery – 在窗口resize时调整元素高度以匹配窗口而不刷新

我有以下脚本，如果页面刷新，但我希望能够动态获取resize的窗口的大小而不刷新页面并将相应的高度应用于一个部分。

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

尝试在窗口resize时设置高度宽度。

窗口大小调整高度/宽度变化小提琴

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(); }); });