设置100％高度减去其他两个DIV

Question

我有以下jsFiddle：http://jsfiddle.net/YT5vt/

我希望第二个DIV（div2）高度始终为100％，但是减去第一个DIV和第三个DIV。当浏览器调整大小时，只会调整第二个DIV的大小。

这也是代码

HTML

<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>

CSS

*{
    margin: 0;
    padding: 0;
}
body, html{
    width:100%;
    height: 100%;
}
.div1{
    width: 100%;
    background: #F00;
    height: 100px;
}
.div2{
    width: 100%;
    background: #FF0;
    height: 100%;
}
.div3{
    width: 100%;
    background: #00F;
    height: 25px;
}

Answer 1

只需使用CSS3 calc()功能：

.div2{
    width: 100%;
    background: #FF0;
    height: -webkit-calc(100% - 125px);
    height: -moz-calc(100% - 125px);
    height: calc(100% - 125px);
}

但是，如果浏览器无法识别该功能，您可能希望使用基于JS的回退。大约73％的用户支持calc() - source。

http://jsfiddle.net/teddyrised/YT5vt/2/

稍微复杂的基于JS（特别是基于jQuery的）后备将是：

$(window).resize(function() {
    $(".div2").height($(window).height() - $(".div1").height() - $(".div3").height()); 
}).resize();

// Resize is fired first when the document is ready,
// and then again when the window is resized

http://jsfiddle.net/teddyrised/YT5vt/5/