Layout with BorderContainer

by seo gyeongseok

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<div dojoType="dijit.layout.BorderContainer" design="headline" splitters="false" id="DashboardContainer">
    <div dojoType="dijit.layout.ContentPane" id="DashboardTop" data-dojo-props="region:'top', splitter:true">
        test
    </div>
    <div dojoType="dijit.layout.ContentPane" id="DashboardLeft" region="left">
        test
    </div>
    <div dojoType="dijit.layout.ContentPane" region="center" id="DashboardCenter" >
        test
    </div>
    <div dojoType="dijit.layout.ContentPane" region="bottom" id="DashboardBottom" >
        test
    </div>
</div>

CSS

#DashboardContainer {
    width: 100%;
    height: 100%;
}
#DashboardTop {
    height: 100px;
}
#DashboardLeft {
    width: 300px;
}
#DashboardBottom {
    height: 100px;
}


html,body{ width: 100%; height: 100%; margin:0px;padding:0px; overflow: hidden;}

JavaScript

require(["dojo/parser", "dijit/layout/ContentPane", "dijit/layout/BorderContainer"]);