htmlcssdojodijit.layout

How to setup a BorderContainer with two regions?

I have the following layout, I need to adjust the size of "Center pane" to fulfill the screen (100%). With the following code I am not able to achieve the result. What am I doing wrong? How to fix it?

http://jsfiddle.net/m8112z2b/

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

  • That's because your HTML only takes up the height it needs. If you want to make your <html> and <body> to be 100% high by default, then you have to use:

    html, body {
  height: 100%;
}

    If you do that, then the center pane will take up the entire screen. This will lead to a screen that is 100% + the additional 100px of the top pane. If you want to make it so that the center pane takes the rest of the height, then you should use: 

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

    For example: http://jsfiddle.net/at38eh7g/