Edit in JSFiddle

Horizontal
<d-linear-layout vertical="false" style="width: 100%; border: solid 1px black">    
    <div class="green fill">
        <div style="position: absolute; border: solid 2px red" class="width100 height100">100%</div>
    </div>
    <div class="blue fill">B</div>
    <div class="red" style="width:150px; height:150px">C</div>
</d-linear-layout> 
Vertical
<d-linear-layout style="height: 200px; width: 100%; border: solid 1px black">    
    <div class="green fill">
        <div style="position: absolute; border: solid 2px red" class="width100 height100">100%</div>
    </div>
    <div class="blue fill">B</div>
    <div class="red" style="height:100px">C</div>
</d-linear-layout> 

* {
    box-sizing: border-box; 
}
.red { background-color: #D9534F; }
.blue { background-color: #5BC0DE; }
.green { background-color: #5CB85C;}

require.config({
    baseUrl: "http://ibm-js.github.io/libraries/master"
});
require(["deliteful-build/layer"], function () {
    require([
        "deliteful/LinearLayout"
    ], function (){
        document.body.style.display = "";
    });
});