设定为100％高度减去其他两个的DIV

我有以下的jsfiddle：http://jsfiddle.net/YT5vt/设定为100％高度减去其他两个的DIV

我想第二个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; 
}

来源

2013-09-26 Enve

这就是所谓的圣杯布局（两个固定宽度两边的柱子，中间的流体宽度）。你可以谷歌它。 – Doorknob

身高：calc（100％ - somepx）;试试这个 –

@ Doorknob：The Fiddle建议一个固定的页眉和页脚。 –

只需使用CSS3 calc()功能：

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

但是，如果浏览器无法识别该功能，则可能需要使用基于JS的回退功能。 calc()由约73％的所有用户支持 - 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/

来源

2013-09-26 19:08:44 Terry

我也说过.. –

设定为100％高度减去其他两个的DIV

回答

相关问题