设置 100% 高度减去其他两个 DIV [重复]答案

【问题标题】：Set 100% height minus two other DIVs [duplicate]设置 100% 高度减去其他两个 DIV [重复]
【发布时间】：2013-09-26 19:05:10
【问题描述】：

我有以下 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;
}

【问题讨论】：

这被称为圣杯布局（两侧固定宽度的两个列，中间是流体宽度）。你可以谷歌一下。
高度：计算（100% - somepx）；试试这个
@Doorknob：Fiddle 建议使用固定的页眉和页脚。
@RobertHarvey 啊，好点，误解了这个问题。您找到的副本将起作用。（为什么不关闭？）
@Doorknob：我的近距离投票具有约束力。

标签： html css

【解决方案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/

【讨论】：