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

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

 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的新手（我今天才开始使用它）。

最佳答案

您必须在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);
        }
     })();
});