Javascript jQuery和CSS的窗口大小问题

在我的网站上，每个div都是根据窗口大小计算的

// Begin functions 

$(document).ready(function(){
    $('.wrapper').css({'top' : '0px','left' : '0px'});
        $('.wrapper > div').css({'height' : + $(window).height() +'px'});
});


$(document).ready(init);

// Set window height and width variables 
var windowheight = $(window).height(); 
var windowwidth = $(window).width(); 

// Check monitor sze and workot if incentives needs extra space etc 
var bff = 3620 + (1993 - windowwidth);

// Move divs into position 
$('.culture').css('top', + - windowheight + 'px');
$('.path').css('top', + - windowheight + 'px');
$('.training').css('top', + - windowheight + 'px');
$('.apply').css({
    'top' : + - windowheight + 'px',
    'width' : windowwidth + 'px'
});

---

上面的方法很好，我的问题是，当页面加载后，如果用户调整了窗口的大小，样式就会被丢弃，因为div已经加载了，jquery有没有办法检测到这一点，然后重新初始化上面的内容

是的，您可以使用jQuery中的

$（window.resize（）

来查找窗口是否已调整大小。

---

您可以绑定到resize events width jquery，这样每次调整窗口大小时，您都可以调用您的代码来进行设置

下一行将调用初始化函数：

$(window).resize(init);

---

为什么不使用

$（窗口）。在（'resize'，init）

？

上使用窗口onresize可以工作

但是，如果可能的话，我会使用纯CSS来实现这一点，比如：

HTML

这样，浏览器将为您处理该问题，从而节省计算麻烦

---

这里的关键是底部和右侧样式，它们仅在position=absolute或position=fixed时才起作用。

简单的解决方案：不要将javascript用于UI问题。通过确保

height:100%

设置为所需元素和所有父元素，这可以在CSS中单独完成。该网站使用jQuery scrollpath插件，不像@RorymcCrossan那样简单。你的

init（）

函数在哪里？我理解你说的@EduardoFerrónn它似乎不起作用，函数没有重新运行可能是jQuery找不到您的函数吗？或者，您获取窗口实际大小的那些行不在“init”函数中，因此它们不会得到更新？

<div id="main-container">
...
</div>

#main-container {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
}