根据调整大小窗口的动态高度div [英] dynamic height div according to resizing window

问题描述

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>

CSS

.header{
    height:50px;
    background-color:#ccc;
    width:500px;
}
.body{
    width:500px;
    max-height:600px;
    text-align:center;
    background-color:#ddd;
    overflow:auto;
}
.body .body-table{
    border-collapse:collapse;
    text-align:center;
    margin:0 auto;
    width:100%;
 }
.footer{
    width:500px;
    height:50px;
    background-color:#eee;
}

JQUERY

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

JSfiddle

http://jsfiddle.net/bDL46/

我想根据尺寸调整窗口增加和减少.如果窗口高度<600减小.div高度，或者如果窗口高度> 600增大.但是我做不到.我的jquery代码不起作用，该怎么办?

I want to increase and decrease according to resizing window. if window height<600 decrease .body div height or if window height>600 increase. But I can't do it. My jquery code not work how can I do this?

推荐答案

您无需添加"px".并且应该在触发resize事件之后获取窗口高度.

You don't need to add "px". And you should be retrieving the window height after the resize event is triggered.

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

尽管如此，您的逻辑还是有缺陷的.使用此代码，在触发足够的调整大小事件后，.body"的高度将缩小为0.

Your logic is flawed though. With this code, the height of the '.body' will be shrunk down to 0 after enough resize events are triggered.

这篇关于根据调整大小窗口的动态高度div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！