使用 display:table 的 HTML 布局问题

【问题标题】：HTML layout issue using display:table使用 display:table 的 HTML 布局问题
【发布时间】：2012-09-07 19:38:10
【问题描述】：

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

要启动一个 jsbin 是here。

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

【问题讨论】：

“可调整大小”是什么意思？它应该增长以适应内容吗？
它应该占据其余的垂直空间。

标签： css html tablelayout

【解决方案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/

【讨论】：

它正在工作。但是当我们不在里面放任何文本时，它就不起作用了。然而，这不是我的问题，所以我接受它。谢谢。
这就是我添加文本的原因，因为我在其他元素中也看到了这种类型的错误。