如何设置两个区域的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？

回答

相关问题