请问关于div的高度问题

假定我定义了如下的几个div：
<DIV id="total" style="height:300px;">
<DIV id="div1" style="height:12px; display:block"></DIV>
<DIV id="div2" style="height:10px; display:block"></DIV>
<DIV id="div3" style="height:16px; display:block"></DIV>
<DIV id="div4" style="height:14px; display:block"></DIV>
<DIV id="div5" style="height:12px; display:block"></DIV>
<DIV id="div6" style="height:12px; display:block"></DIV>

<div id="auto_height"></div>
</DIV>

我应该怎样定义div auto_height，才能使得：
1)全部div(div1+div2...+div6+div_auto_height)的总高度就是300
2)当div1/div2/.../div6中的一个或者几个的display设定为none时，div_auto_height的高度能自动调整，使得总高度还是300?

谢谢！
pj96127你好，我试过了，好像不行。总高度并不固定。如果把div1-6的display改为none时

可以换个思路,你用DIV就是为了分隔区间,分隔区间最好用table
<table style="height:300px; ">
<tr><td id="div1" style="height:12px; "></td></tr>
<tr><td id="div2" style="height:10px; "></td></tr>
<tr><td id="div3" style="height:16px; "></td></tr>
<tr><td id="div4" style="height:14px; "></td></tr>
<tr><td id="div5" style="height:12px; "></td></tr>
<tr><td id="div6" style="height:12px; "></td></tr>

<tr><td id="auto_height"></td></tr>

</table>

<DIV id="total" style="height:300px;background:red;overflow:hidden;">
<DIV id="div1" style="height:12px; display:block">div1</DIV>