解決 DIV 包 DIV 超出範圍問題

<style type="text/css">
#mastercontent { position:relative; width:100%;height :100%;border-right: #ff3300 thin solid; border-top: #ff3300 thin solid; border-left: #ff3300 thin solid; border-bottom:#ff3300 thin solid;}
#primary { position:absolute; margin-left: 200px; width:192px; border-right: #00cc66 thin solid; border-top: #00cc66 thin solid; border-left: #00cc66 thin solid; border-bottom:#00cc66 thin solid;}
#secondary { position:absolute; width:192px; border-right: #0099cc thin solid; border-top: #0099cc thin solid; border-left: #0099cc thin solid; border-bottom:#0099cc thin solid;}
</style>
<div  id = "mastercontent">
<div id = "primary">
<br/><br/><br/><br/>
</div>
<div id = "secondary">
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</div>

出現了上圖的問題，又不想設定父DIV的高度(不同解析度會出現捲軸) 如果加上下面script即可解決

<script type="text/javascript">
var h = document.documentElement.clientHeight ;  /*先抓畫面上可視範圍的高度*/
var obj1= document.getElementById ("mastercontent");
var obj2= document.getElementById ("primary");
var obj3= document.getElementById ("secondary");
obj1.style.height = h -60; /*設定div高度*/
obj2.style.height = h -66;
obj3.style.height = h -66;
</script>