道場：TabContainer的區域中的「頂」內使用BorderContainer

Question

看不見我要放置TabContainer一個BorderContainer這樣的頂部區域內：

<div id="appLayout" data-dojo-type="dijit/layout/BorderContainer"> 
    <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region: 'top'"> 
     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 1'">tab 1</div> 
     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 2'">tab 2</div> 
    </div> 
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">center</div> 
</div>​ 

當我嘗試這個TabContainer是看不見的。

<div id="appLayout" data-dojo-type="dijit/layout/BorderContainer"> 
    <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region: 'center'"> 
     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 1'">tab 1</div> 
     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 2'">tab 2</div> 
    </div> 
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'">bottom</div> 
</div>​ 

爲什麼在頂部區域的TabContainer無形的：當我放置TabContainer在BorderContainer的中心區域 一切正常？我可以讓它可見嗎？

編輯：TabContainer的內容具有可變高度，所以我不想手動設置高度。

Answer 1

設置TabContainer div的高度css屬性，例如如：

<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region: 'top'" style="height: 100px;"> 
    ... 
</div> 

Answer 2

嘗試調整根BorderContainer的大小。

它看起來像一些黑客，但它爲我工作：

<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-attach-point="rootContainerWidget"> 
    <!-- content panes, tab containers etc --> 
</div> 

和widget代碼中添加公共調整方法：

resize: function() { 
    // resize hack 
    this.rootContainerWidget.resize(); 
}