我为我的问题创建了一个小提琴：http: //jsfiddle.net/XJpGT/
绿色框的高度应始终为 100%，但同时绿色和橙色框不应大于蓝色。我做了一个屏幕以便更好地理解：
http://img716.imageshack.us/img716/3736/b3oe.png
这可能吗？内容是动态的，所以所有的盒子都可以有不同的高度。
我尝试使用以下代码来完成，但正如您在小提琴中看到的那样，它并没有像我想要的那样工作。
.right1:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
我已经更新了你的小提琴，看看这里：http: //jsfiddle.net/avrahamcool/XJpGT/1/
我的解决方案并不完美，因为您必须手动划分height绿色 div 和橙色 div（以及margin它们之间）。（在演示中，我给了 80% 的绿色，10% 的橙色和 5% 的边距）但它尽可能接近你的目标。
更新： 我已经更新了 filddle，看这里：http: //jsfiddle.net/avrahamcool/XJpGT/4/
现在您不必指定高度，诀窍是 caled faux column，您可以在整个网络上阅读它。
在.right2:before, .right2:after您指定以 px 为单位的边距right2。