設定爲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

回答

相關問題