使用display：table的HTML布局问题

Question

我正在尝试使用display:table, table-row来获得最终输出，如下所示。蓝色框应该可以调整大小，红色框应该有固定的高度。

启动jsbin是here。

我正在寻找一个css解决方案。感谢。

Answer 1

可以使用 display：table 。写得像这样：

#wrapper {height:250px; width:200px; border:3px solid gray; display:table;}
  #one {height:100px; background-color:red;display: table-row;}
  #two {background-color:blue;display: table-row;}

选中此http://jsfiddle.net/jYvK2/