Question

在我的网站上，每个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来检测这个和然后重新初始化上面的？

Answer 1

是的，您可以在jQuery中使用$(window).resize()查找窗口是否已调整大小。 http://api.jquery.com/resize/

Answer 2

您可以绑定调整大小事件宽度jquery，这样每次调整窗口大小时，您都可以调用代码来设置内容。

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

$(window).resize(init);

Answer 3

为什么不使用$(window).on('resize', init)？

Answer 4

使用onresize窗口可以正常工作。

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

HTML

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

CSS

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

这样，浏览器就会为您处理，节省计算麻烦。

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

jQuery和CSS的窗口大小问题

4 个答案: