Javascript 根据窗口大小调整动态高度div

HTML

<div class="header">Header</div>
 <div class="body">
    <table class="body-table">
        <tr>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr>
            <td>Cell</td>
            <td>Cell</td>
           <td>Cell</td>
       </tr>
       <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
       </tr>
       <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
        </tr>
        <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
        </tr>
        <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
        </tr>
        <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
        </tr>
    </table>    
 </div>
<div class="footer">
    <button>Submit</button>
</div>

JQUERY

var windowHeight = $(window).height();
$(window).resize(function(){
    if(windowHeight<600+'px'){
        $('.body').height($('.body').height()-20+'px');
    }
});

var windowHeight=$（window.height（）；
$（窗口）。调整大小（函数（）{
如果（windowHeight您不需要添加“px”，并且您应该在触发调整大小事件后检索窗口高度

$(window).resize(function(){
    if($(window).height() < 600){
        $('.body').height($('.body').height()-20);
    }
});

$（窗口）。调整大小（函数（）{
如果（$（窗口）.height（）<600）{
$（'.body'）.height（$（'.body'）.height（）-20）；
}
});

但是，您的逻辑有缺陷。使用此代码，“.body”的高度将在触发足够多的调整大小事件后缩小为0。
尝试此选项。您可以为该范围指定一个范围和特定高度

$(window).resize(function(){
    if($(window).height() < 600){
        $('.body').height($('.body').height()-20);
    }
});

$(window).resize(function(){
    var small_height = 200;
    var big_height = 400;

    if($(window).height() < 600)
    {
        $('.body').height(small_height);
    }
    else // The window height is bigger than or equal to 600
    {
        $('.body').height(big_height);
    }
});

$（窗口）。调整大小（函数（）{
var小_高度=200；
var big_高度=400；
如果（$（窗口）.height（）<600）
{
$（'.body'）。高度（小高度）；
}
否则//窗口高度大于或等于600
{
$（'body'）。高度（大高度）；
}
});
尝试在不使用javascript的情况下执行此操作，并添加了一个额外的
.container
分区：

HTML:


标题
身体。。。
页脚

CSS:

html，主体，.container，div{
保证金：0；
填充：0；/*规格化*/
}
html，正文{
身高：100%；
溢出y：隐藏；
}
.集装箱{
位置：相对位置；
身高：100%；
溢出：自动；
最小宽度：500px；
}
.header、.body、.footer{
位置：绝对位置；
宽度：500px；
左：50%；
左边距：-250px；/*中心divs*/
}
.标题{
排名：0；
高度：50px；
背景色：#ccc；
}
.身体{
顶部：50px；
底部：50px；
文本对齐：居中；
背景色：#ddd；
溢出：自动；
}
.页脚{
底部：0；
高度：50px；
背景色：#eee；
}
@全部和全部介质（最大高度：200px）{
身体{
溢出y：滚动；
}
.集装箱{
最小高度：200px；
}
/*  http://www.w3.org/TR/css3-mediaqueries/  */
}

下面是完整的最终结果：
是的，你是对的，但我找不到当车窗高度增加时如何操作。身体级别的div高度也会增加？@midstack在降低后不会增加。我如何根据车窗高度增加它？