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

Question

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

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

这也是代码

超文本标记语言

<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

只需使用 CSS3calc()函数：

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

但是，如果浏览器无法识别该函数，您可能需要使用基于 JS 的回退。calc()大约有 73% 的用户支持 -来源。

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/