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()，以便可以响应当前窗口大小。你可以这样做:

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