CSS 100％div高度

Question

我为我的问题创造了一个小提琴： http://jsfiddle.net/XJpGT/

绿色盒子的高度应该是100％，但同时绿色和橙色盒子不应该大于蓝色。我制作了一个屏幕以便更好地理解：

http://img716.imageshack.us/img716/3736/b3oe.png

这可能吗？内容是动态的，因此所有框都可以有不同的高度。

我尝试使用以下代码完成，但正如您在小提琴中看到的那样，它不能像我想的那样工作。

.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/

现在你没有指定和高度，诀窍是 faux column ，你可以通过网络阅读它。

在.right2:before, .right2:after中指定px中right2左右的边距。