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

Question

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，则减少.body div的高度；如果窗口高度大于600，则增加高度。但是我做不到。我的jquery代码无法正常工作，我该怎么办？

- midstack

Answer 1

您无需添加“px”。并且在触发调整大小事件后，应获取窗口高度。

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

你的逻辑有误。使用这段代码后，当触发足够多的调整大小事件后，'.body' 的高度将被缩小为0。

- nderscore

---

是的，你说得对，但我找不到如何在窗口高度增加时使.body类div高度也增加的方法？ - midstack

@midstack 减少后暂时不会增加。 - Mohammad Areeb Siddiqui

如何根据窗口高度增加它？ - midstack

Answer 2

尝试这个。您可以为该范围分配一个特定的高度。

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

- David

Answer 3

尝试不使用JavaScript，并添加一个额外的 .container 区块： HTML:

<div class="container">
    <div class="header">Header</div>
    <div class="body">Body...</div>
    <div class="footer">Footer</div>
</div>

CSS（层叠样式表）：

html, body, .container, div {
    margin:0;
    padding:0; /*normalize*/
}
html, body {
    height:100%;
    overflow-y:hidden;
}
.container {
    position:relative;
    height:100%;
    overflow:auto;
    min-width:500px;
}
.header, .body, .footer {
    position:absolute;
    width:500px;
    left:50%;
    margin-left:-250px; /* center divs */
}
.header {
    top:0;
    height:50px;
    background-color:#ccc;
}
.body {
    top:50px;
    bottom:50px;
    text-align:center;
    background-color:#ddd;
    overflow:auto;
}
.footer {
    bottom:0;
    height:50px;
    background-color:#eee;
}
@media all and (max-height:200px) {
    body {
        overflow-y:scroll;
    }
    .container {
        min-height:200px;
    }
    /*  http://www.w3.org/TR/css3-mediaqueries/  */
}

这是完整的最终结果：http://jsfiddle.net/bDL46/2/

- Stano