Question

嗨，我希望有人能够解释我在这里做错了什么：

 var winHeight = $(window).height(),
 minHeight = 900,
 Height = 900;

 $(document).ready(function () {

 if (winHeight < MinHeight) {
     Height = minHeight;
 } else {
     Height = winHeight;
 }
 $('div.page').css('height', winHeight + 'px');
});


 $(window).resize(function () {
 if (winHeight < MinHeight) {
     Height = minHeight;
 } else {
     Height = winHeight;
 }
 $('div.page').css('height', winHeight + 'px');

});

在我的页面上，我有多个带有“页面”类的div。我正在尝试将这些大小设置为浏览器窗口的大小，除非浏览器窗口小于900，然后我希望它们是900px高。

我猜它是一个语法问题。特别是因为我是jquery和javascript的新手（我今天才开始使用它）。

Answer 1

您必须在resize事件上调用$(window).height()，以便您可以响应当前窗口大小。你可以这样做：

$(document).ready(function () {
    //Call the method one time
    updateWindowSize();
    //Subscribe the method to future resize events
    $(window).resize(updateWindowSize);

    //updateWindowSize inside a closure to hide 'minHeight'
     var updateWindowSize = (function(){
        var minHeight = 900;

        //Actual updateWindowSize function
        return function(){
            var winHeight = $(window).height();
            var newHeight = winHeight < minHeight ? minHeight : winHeight;
            $('div.page').height(newHeight);
        }
     })();
});

Answer 2

问题是当窗口调整大小时，winHeight的值永远不会改变。我想知道变量“Height”在哪里使用？

代码应为：

$(document).ready(function () {  
  $(window).resize(function () {
    var winHeight = $(window).height(),
    minHeight = 900,
    Height = 900;
    if (winHeight < minHeight) {
       Height = minHeight;
    } else {
       Height = winHeight;
    }

    $('div.page').height(Height);
  });
});

有意义吗？

将div的高度更改为浏览器窗口高度，浏览器高度大于x

2 个答案: