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

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

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

$(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 的值永远不会改变。我想知道变量“高度”在哪里使用？

代码应该是：

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

说得通？