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

Question

我正在为网站使用 jQuery EasyUI 布局类 ( http://www.jeasyui.com/documentation/layout.php )。在 layout-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>

虽然第一个版本工作得很好（见这个小提琴），但第二个版本不行（见这里）。有谁知道为什么不知道，即如何使面板的尺寸相对？谢谢！

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%;
}