CSS 100％div高度

Question

我為我的問題創建了一個小提琴： http : //jsfiddle.net/XJpGT/

綠色框的高度應始終為100％，但同時綠色和橙色框的高度不應大於藍色。 我做了一個屏幕以便更好地了解：

這可能嗎？ 內容是動態的，因此所有盒子的高度都可以不同。

我試圖用以下代碼完成操作，但是正如您在小提琴中看到的那樣，它並沒有按照我想要的那樣工作。

.right1:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;         
}

Answer 1

我已經更新了您的小提琴，請看這里： http : //jsfiddle.net/avrahamcool/XJpGT/1/

我的解決方案並不完美，因為您將不得不手動划分綠色div和橙色div之間的height （以及它們之間的margin ）。 （在演示中，我給了80％的綠色，10％的橙色和5％的利潤），但它盡可能接近您的目標。

更新：我已經更新了filddle，請看這里： http : //jsfiddle.net/avrahamcool/XJpGT/4/

現在你不必指定和高度，訣竅是caled 人造欄 ，你可以在網上讀到這一切。

在.right2:before, .right2:after您以px為單位指定right2的邊距。