DOJO ContentPane inner DIV height changing on ContentPane resize

http://stackoverflow.com/questions/10832653/dojo-contentpane-inner-div-height-changing-on-contentpane-resize

by phusick

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css">
<div
    id="indent_1"
    data-dojo-type="dijit.layout.BorderContainer"
    data-dojo-props="
        design: 'headline',
        gutters: true,
        liveSplitters: true
        "
>

    <div
        id="indent_1_1"
        data-dojo-type="dijit.layout.BorderContainer"
        data-dojo-props="
            design: 'headline',
            gutters: true,
            region: 'center'
            "    
    >
        
        <div
            id="indent_1_1_1"            
            data-dojo-type="dijit.layout.ContentPane"            
            data-dojo-props="
                region: 'center'
            "
        >
            indent 1.1.1 (region: 'center')
        </div>
        
        <div
            id="indent_1_1_2"            
            data-dojo-type="dijit.layout.ContentPane"            
            data-dojo-props="
                region: 'bottom'
            "
        >
            indent 1.1.2 (region: 'bottom', height: 100px;)
        </div>
        
        
    </div>
    
    <div
        id="indent_1_2"        
        data-dojo-type="dijit.layout.ContentPane"        
        data-dojo-props="
            region: 'bottom',
            splitter: true
        "        
    >
        indent 1.2 (splitter: true)     
    </div>
</div>

CSS

html, body {
    height: 100%;
}

#indent_1 {
    height: 100%;
    background-color: #ccc;  
}

#indent_1_1 {
    background-color: green;
}

#indent_1_2 {
    background-color: white;
}

#indent_1_1_1 {
    background-color: greenyellow;
}

#indent_1_1_2 {
    height: 100px;
    background-color: greenyellow;
}

JavaScript

require([
    "dojo/ready",
    "dojo/aspect",
    "dijit/registry",
    "dijit/layout/ContentPane",
    "dijit/layout/BorderContainer"
], function(
    ready, aspect, registry
) {

    // code needed to resize <divs> 
    // not needed at all if layout is based on nested
    // BorderContainer
    ready(function() {
        var bc = registry.byId("indent_1_1");
        aspect.after(bc, "resize", function() {
            // calculate and set <div> size here
            console.log("resize divs");
        });
    });
      
});