css - display：tableを使用したHTMLレイアウトの問題

Question

私はdisplay:table, table-row以下のように最終的な出力を得るために使用しようとしています。青いボックスはサイズ変更可能で、赤いボックスの高さは固定されている必要があります。

jsbinを開始するには、ここにあります。

私は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/