AngularJS - Animated 100% width & 100% height application layout.

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-example1-production</title>
  <link href="animations.css" rel="stylesheet" type="text/css">


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.js"></script>



</head>

<body ng-app="ngAnimate"  ng-init="fff=true;ddd=true">


  <div class="container">


    
    <div class="content-show-hide content" ng-show="!ddd">
      <div>content</div>
    </div>
    
    <div class="side-show-hide side" ng-show="ddd">
      <label class="handle"><input type="checkbox" ng-model="ddd">{{ddd?'Show':'Hide'}}</label>
      <div>side</div>
    </div>


    <div class="footer-show-hide footer" ng-show="fff">
      <label>
        <input type="checkbox" ng-model="fff">{{!fff?'Show':'Hide'}}
      </label>
      <div>
        footer
      </div>
    </div>
  </div>


</body>

</html>

body, html {
  height: 100%;
  margin: 0px;
}

.container {
	height: 100%;
	background: #cccccc;
}


.content {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  background-color: blue;
  border: 1px solid #aa2F6b;
  height:100%;
  margin-left:20px;
}
.content-show-hide {
  transition: margin-left 0.25s linear;
}
.content-show-hide.ng-hide {
  margin-left:200px;
  display: block!important;
}





.side {
  position:absolute;
  left:0;
  background-color: green;
  border: 1px solid #2F6A37;
  width: 200px;
  height:100%;
}
.side-show-hide {
  transition: width 0.25s linear;
}
.side-show-hide.ng-hide {
  width: 20px;
  display: block!important;
}





.footer {
  position:absolute;
  width:100%;
  box-sizing: border-box;
  bottom:0px;
  background-color: red;
  border: 1px solid black;
  height: 150px;
}
.footer-show-hide {
  transition: height 0.25s linear;
}
.footer-show-hide.ng-hide {
  height: 25px;
  display: block!important;
}






.handle{width:20px;height:20px; background-color:silver;float:right;}

AngularJS animated 100% width and 100% height application layout. 
Done with pure css (without code).