css - div内のdivのCSS HTMLテキストエリアの最大高さからヘッダーを引いたもの

Question

ここに私が使用しているHTMLコードがあります:

<div id="header">123</div>
<div id="editorcontent">
    <div id="ta_a"><textarea style="resize: none;"><? echo $t1; ?></textarea></div>
    <div id="ta_c"><textarea style="resize: none;"><? echo $t2; ?></textarea></div>
    <div id="centerinfo">CONTENT 1</div>
    <div id="clear"></div>
    <div id="centerinfo">CONTENT 2</div>
    <div id="ta_b"><textarea style="resize: none;"><? echo $u1; ?></textarea></div>
    <div id="ta_d"><textarea style="resize: none;"><? echo $u2; ?></textarea></div>
</div>

そしてCSS：

#editorcontent {
  min-height: 400px;
  min-width: 800px;
  overflow: hidden;
  position: relative;
  height: auto;
  width: 100%;
}

#ta_a {
  position: relative;
  width: 40%;
  height: 50%;
  float: left;
}

#ta_c {
  position: relative;
  width: 40%;
  height: 50%;
  float: right;
}

#ta_b {
  position: relative;
  width: 40%;
  height: 50%;
  float: left;
}

#ta_d {
  position: relative;
  width: 40%;
  height: 50%;
  float: right;
}
#centerinfo {
  text-align: center;
  position: relative;
  width: 19.6%;
  height: 40%;
  display: inline-block;
}
#clear {
  clear:both;
  min-height: 10px;
}
#header {
  height: 44px;
  background: #D00000;
}

問題は、テキストエリアの 2 倍の 50% がヘッダーを見ていないため、ページの高さが常に大きすぎることです...

フィドル http://jsfiddle.net/5SD2U/