container test

by grippstick

HTML

<link rel="stylesheet" href="https://aligntoday.com/Kendo/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://aligntoday.com/Kendo/styles/kendo.flat.min.css">
<script src="https://aligntoday.com/Kendo/js/jquery.min.js"></script>
<script src="https://aligntoday.com/Kendo/js/kendo.all.min.js"></script>
<header id='header' data-bind='attr:{class:expando}'>header</header>
<div id='content' data-bind='attr:{class:expando}'>
    <button data-bind='click:clickToggleExpando'>Toggle</button>
    <div id='swappableContent'></div>
</div>

CSS

/* 
apply a natural box layout model to all elements, but allowing components to change 
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
*/
 html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    -webkit-flex-direction: column
}
body, body:after, html {
    width: 100%;
    height: 100%
}
body {
    background-color:red;
}
body, html {
    padding: 0;
    margin: 0;
    font-family: Roboto;
    font-weight: 400;
    color: #444;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
body {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -ms-flex-line-pack: stretch;
    -webkit-align-content: stretch;
    align-content: stretch;
    will-change: transform
}
body:after {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity .333s cubic-bezier(0, 0, .21, 1) .4s
}
#header {
    background-color: darkgreen;
    height: 56px;
}
#content {
    height: 50%;
    width: 75%;
    background-color:yellow;
    overflow:auto;
}

#header.expando {
    transition: -webkit-transform .233s cubic-bezier(0, 0, .21, 1) .13s;
    transition: transform .233s cubic-bezier(0, 0, .21, 1) .13s;
    -webkit-transform: translateY(-56px);
    transform: translateY(-56px);
}
#content.expando {
    height: 75%;
    transition: -webkit-transform .233s cubic-bezier(0, 0, .21, 1) .13s;
    transition: transform .233s cubic-bezier(0, 0, .21, 1) .13s;
    -webkit-transform: translateY(-56px);
    transform: translateY(-56px);
}
#swappableContent {
    height:900px;
   ...

JavaScript

var vm = new kendo.observable({
    expando: "",
    clickToggleExpando: function () {
        var expando = vm.get('expando') ? '' : 'expando';
        vm.set('expando', expando);
    }
});


kendo.bind($('body'), vm);