Javascript 如果浏览器高度小于给定的像素数，如何更改div高度？

我有一个div，我想成为两种尺寸中的一种

如果浏览器窗口高度小于给定高度，则它将使用较小的高度作为div 但是，如果浏览器窗口的高度大于给定的高度，则会对div使用更大的高度 我尝试了以下代码，但不起作用。我需要帮助才能让它工作

以下是jsbin：

以下是我目前掌握的代码：

page.html

script.js

---

你可以用CSS来做这个，我的好先生。这叫做响应式设计

@media (max-height:500px) {
    Enter special css conditions for 500px height.
}

@media (max-height:200px) {
    Enter special css conditions for 200px height.
}

这是最常用的最大宽度，因为它可以告诉我们当有人在使用移动设备时，比如360px最大宽度，然后我们可以修改我们的页面，使其在移动设备上看起来更漂亮。不需要花哨的javascript

var threshhold;
var smallerHeight = 50;
var largerHeight = 100;

if ($(window).height() < threshold)
    $('#theDiv').height(smallerHeight);
else
    $('#theDiv').height(largerHeight);

拨弄

---

我不知道怎么用这个。我在哪里定义最小窗高？我在哪里定义特定ID？我不明白为什么这里有两个单独的规则？你只需要一个？你把这个代码放在你的.css文件中。这不是javascript，而是css。或者你可以把它放在索引页面的样式标签中。我只是举了两条规则作为例子，你可以在多个高度上做。这里有一个简单的例子，调整右下角窗口的大小，以查看长方体根据高度更改颜色。你所需要做的就是改变200px的高度，改变div的大小而不是颜色。哦！谢谢你的例子！正是我需要的！非常容易修复，而且不需要javascript！被接受为最佳答案！很好的解决方案，我刚刚在我的页面上实现了这一点，效果非常好！可以根据窗口高度轻松定义多种样式！这与我使用的完全相同，只是我使用了minAllowedWindowHeight变量名，而不是Threshold变量名。您还忘了为Threshold定义一个数字。i、 e.阈值=500；无论如何，由于这与我的问题完全相同，它当然不起作用。@user2845197您看到错误了吗？您有一个错误，这就是它不工作的原因。这在您的JSFIDLE中工作！非常感谢。唯一的问题是，我不得不接受其他人作为最佳答案，因为他们在没有任何javascript的情况下做得更简单。但你的解决方案确实有效，可惜我不能选择两个最好的答案！至少我投票支持你：我同意，另一个答案更好。我只把我的贴成完整！

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

    // variables
     var updateWindowSize = (function(){
        var minAllowedWindowHeight = 500;
        var largerDivHeight = 400;
        var smallerDivHeight = 300;

        // actual updateWindowSize function
        return function(){
            var winHeight = $(window).height();
            var newHeight = winHeight < minAllowedWindowHeight ? smallerDivHeight : largerDivHeight;
            $('#theDiv').height(newHeight);
        };
     })();
});

@media (max-height:500px) {
    Enter special css conditions for 500px height.
}

@media (max-height:200px) {
    Enter special css conditions for 200px height.
}

var threshhold;
var smallerHeight = 50;
var largerHeight = 100;

if ($(window).height() < threshold)
    $('#theDiv').height(smallerHeight);
else
    $('#theDiv').height(largerHeight);