CSS 100% div 高度

Question

我为我的问题创建了一个 fiddle : http://jsfiddle.net/XJpGT/

绿色框的高度应始终为 100%，但同时绿色和橙色框不应大于蓝色框。为了更好的理解，我做了一个屏幕:

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

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

我尝试使用以下代码来完成，但正如您在 fiddle 中看到的那样，它并没有像我想要的那样工作。

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

Answer 1

我已经更新了你的 fiddle ，看看这里:http://jsfiddle.net/avrahamcool/XJpGT/1/

我的解决方案并不完美，因为您必须手动在绿色 div 和橙色 div(以及它们之间的 margin)之间划分 height。 (在演示中，我给了绿色 80%，橙色 10%，边距 5%) 但它尽可能接近您的目标。

更新: 我已经更新了 fiddle ，看这里:http://jsfiddle.net/avrahamcool/XJpGT/4/

现在您不必指定高度，这个技巧被称为人造列，您可以在整个网络上阅读它。

在 .right2:before, .right2:after 中，您以 px 为单位指定 right2 周围的边距。