Layout heights

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/resources/dnd.css">
<div id="appContainer"></div>

CSS

body, html, #appContainer {
    height : auto;
    width : 100%;
}
#appContainer {
    background : #EFF;
    height : 100%;
     width : 100%;
}

#top {
    background : #FFE;
    height : 30px;
}

#left {
    background : #EFE;
    min-width : 20%;
}

#main {
    background : #EEE;
}

.bookingDojo {
    border : 2px solid red;
}
#bookingDojo { 
    height : 100%;
    outline : 5px solid blue;
}

JavaScript

require(["dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dijit/layout/BorderContainer", "dijit/layout/ContentPane"],
function(declare, _WidgetBase, _TemplatedMixin, BorderContainer, ContentPane){
    var bc = new BorderContainer({ 
        design : "headline"
    }, "appContainer");
    
    var top = new ContentPane({ id : "top", region : "top", innerHTML : "Banner" });
    var left = new ContentPane({ id : "left", region : "left", gutters: true, innerHTML : "Left menu" });
    var main = new ContentPane({ id : "main", region : "center" });
    
    var BookingDojo = declare([_WidgetBase, _TemplatedMixin], {
        templateString : "<div><div class='bookingDojo'>I'm the bookingDojo widget inner node !</div></div>"
    });
    
    var w = new BookingDojo({ id : "bookingDojo" });
    w.placeAt(main.domNode);
    bc.addChild(top);
    bc.addChild(left);
    bc.addChild(main);
    bc.startup();
    
});