如何設置兩個區域的BorderContainer？

我有以下佈局，我需要調整「中心窗格」的大小以實現屏幕（100％）。用下面的代碼我無法實現結果。我在做什麼錯？如何解決它？如何設置兩個區域的BorderContainer？

<div data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%" id="xxx-dijit-layout-app"> 
     <div data-dojo-type="dijit/layout/ContentPane data-dojo-props=" region:'top'" id="xxx-dijit-layout-control">Top pane</div> 
     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" id="xxx-dijit-layout-workspace">Center pane</div> 
    </div> 

     #xxx-dijit-layout-app { 
      width: 100%; 
      height: 100%; 
     } 

     #xxx-dijit-layout-control { 
      height: 100px; 
      background-color: red; 
     } 

     #xxx-dijit-layout-workspace { 
      height: 100%; 
      background-color: yellow; 
     }

來源

2014-12-19 GibboK

這是因爲你的HTML只佔用了它所需要的高度。如果你想使你的<html>和<body>是在默認情況下高100％，那麼你必須使用：

html, body { 
    height: 100%; 
}

如果你這樣做，那麼中心窗格中會佔據整個屏幕。這將導致100％的屏幕+頂部窗格的額外100像素。如果你想要讓這個中心窗格中需要高度的休息，那麼你應該使用：

#xxx-dijit-layout-workspace { 
    height: calc(100% - 100px); 
    background-color: yellow; 
}

例如：http://jsfiddle.net/at38eh7g/

來源

2014-12-19 08:22:14 g00glen00b

試試這個

body { 
    margin: 0; 
}

來源

2014-12-19 08:07:06 servinlp

只是在你的CSS

html,body{ 

height:100%; 
margin:0; 
padding:0; 
}

你沒有給你的身體和HTML的任何高度添加此。

來源

2014-12-19 08:12:41

如何設置兩個區域的BorderContainer？

回答

相關問題