deliteful-LinearLayout-header-list-footer

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js"></script>
<d-linear-layout class="full-screen">    
    <div class="header">Header</div>
    <d-list class="fill">
			{"label": "Item 1"},
			{"label": "Item 2"},
			{"label": "Item 3"},
			{"label": "Item 4"},
			{"label": "Item 5"},
			{"label": "Item 6"},
			{"label": "Item 7"},
			{"label": "Item 8"},
			{"label": "Item 9"},
			{"label": "Item 10"}       
    </d-list>
    <div class="footer">Footer</div>
</d-linear-layout>

CSS

html, body, .full-screen {
    width: 100%;
    height: 100%;
}

* {
    box-sizing: border-box; 
    margin: 0;
    padding: 0;
}

.header, .footer { 
    background-color: #4882CA;
    color: white;
}

JavaScript

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