jquery - 动态和自定义 div 定位

Question

我有这个div结构

<div class="panel">
    <div class="north"></div>
    <div class="center"></div>
</div>

外层是jQuery resizable我试着用百分比定位 div，

.north{height:30%}
.center{height:70%}

完美，我明白了

现在我被困在如何得到这个:

有什么帮助吗？
请不要忘记外部 div 是可调整大小的。

Here是我的起点。

编辑
我也试过了

.panel{display:table;}
.north,.center{display:table-row;}

但这不适用于 IE<8

Answer 1

另一种使用 float 的解决方案:http://jsfiddle.net/KMWw4/2/

.panel {
    width:  300px;
    height: 500px; /* explicit height */
    float: left;
}
.north {
    float: left; display: inline; /*iefix*/
    width:  100%;
}
.center {
    height: 100%;
}

.panel-percent .north {
    height: 30%; /* you can use percentages */
}
.panel-fixed .north {
    height: 100px; /* ... or pixel height */
}

​