jQuery EasyUI：相对面板/布局尺寸（百分比）

Question

我为网站使用jQuery EasyUI布局类（http://www.jeasyui.com/documentation/layout.php）。在布局div中，可以放置区域（北，南，西，东和中心）。

我想让北面和南面的面板相对于容器的尺寸而不是给它们绝对的px值。所以我想从这个

<div id="cc" class="easyui-layout" style="width:200px;height:400px;"> 
    <div data-options="region:'north',title:'North',split:true" style="height:100px;"></div> 
    <div data-options="region:'south',title:'South',split:true" style="height:100px;"></div> 
    <div data-options="region:'center',title:'center'"></div> 
</div> 

移动到这个

<div id="cc" class="easyui-layout" style="width:200px;height:400px;"> 
    <div data-options="region:'north',title:'North',split:true" style="height:25%;"></div> 
    <div data-options="region:'south',title:'South',split:true" style="height:25%;"></div> 
    <div data-options="region:'center',title:'center'"></div> 
</div> 

虽然第一个版本只是罚款（见本fiddle），二不（见here）。有没有人有一个想法，为什么不，即如何使面板相对于他们的维度？谢谢！

Answer 1

试试这个，

<div id="cc" class="easyui-layout" style="width:200px;height:400px;"> 
    <div data-options="region:'north',title:'North',split:true" class="north"></div> 
    <div data-options="region:'south',title:'South',split:true" class="south"></div> 
    <div data-options="region:'center',title:'center'"></div> 
</div> 

.north 
{ 
    height:25%; 
} 
.south 
{ 
    height:25%; 
}