How to setup a BorderContainer with two regions?

Question

How to setup a BorderContainer with two regions?

72 views Asked by GibboK At 19 September 2024 at 18:57

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

Original Q&A

There are 3 answers

servinlp On 19 December 2014 at 08:07

Try this

body {
   margin: 0;
}

shyam selvan On 19 December 2014 at 08:12

just add this in your css

html,body{

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

you have not given any height for your body and html.

**Dimitri Mestdagh** · Accepted Answer · 2014-12-19 08:22:14

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/

TechQA.

How to setup a BorderContainer with two regions?

There are 3 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in DOJO

Related Questions in DIJIT.LAYOUT

Popular Questions

Popular Tags

Trending Questions