javascript - BorderContainer dojo，顶部有2个ContentPane，底部有1个

我想要一个具有以下结构的BorderContainer：



我有此代码，但无法正常工作。底部的高度不起作用，所以我不知道如何解决。

                this.bc = new BorderContainer({
                    style: "height: 100%; width: 100%;",
                    design:'sidebar',
                    gutters:true,
                    liveSplitters:true,
                });

                this.cp1 = new ContentPane({
                    region: "leading",
                    style: "width: 50%;height : 50%;",
                    content: '<div style="width:100%;height:100%"></div>',
                    splitter:true
                });
                this.bc.addChild(this.cp1);

                this.cp2 = new ContentPane({
                    region: "center",
                    style: "width: 50%;height : 50%;",
                    content: '<div style="width:100%;height:100%"></div>',
                    splitter:true
                });
                this.bc.addChild(this.cp2);

                this.cp3 = new ContentPane({
                    region : "bottom",
                    style: "height : 50%",
                    content: '<div style="width:100%;height:100%"></div>',
                    splitter:true
                });
                this.bc.addChild(this.cp3);

                dijit.byId("containerPane").addChild(this.bc, 0);

                this.bc.startup();

                this.bc.resize();

最佳答案

我不确定您所说的底部高度不起作用，您能具体一点吗？这是一个工作的jsfiddle，也许这会有所帮助吗？
http://jsfiddle.net/edchat/1cr6hsfa/

大小不能使用50％，因为分隔符和填充占用了空间，因此您没有足够的空间让两个contentPanes都使用50％。

而且我不认为您要设计：“侧边栏”

design:'sidebar',

关于javascript - BorderContainer dojo，顶部有2个ContentPane，底部有1个，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28108693/