title: Angular.js <div ng-include> not filling vertical veiwport
body: <p>Using Angular.Js, I am trying to make a single page app where the with the scrolling effect. I want each ng-inlcude section... the <code>&lt;div class="viewport" ng-include="'views/file'" ng-controller="MainCtrl"&gt;&lt;/div&gt;</code> to fill the viewport. However, it' not. </p>
  
  <p>I set the html and body to 100% in CSS, and then each ng-include the same. However, I still can not make each div fill the viewport. I am not sure if the actual parent HTML and body are being sized percentage wise, since the logic is for the children to fill percentage wise to the parent.  </p>
  
  <pre><code>  &lt;body ng-app="myappApp"&gt;
      &lt;div id="sidebar-back-drop"&gt;&lt;/div&gt;
      &lt;div class="row"&gt;
      &lt;div id="sidebar-bar-static" class="col-xs-2"&gt;
          &lt;a href="#fakelink" id="button" class="btn btn-block btn-md btn-inverse"&gt;Home&lt;/a&gt;
          &lt;a href="#fakelink" id="button" class="btn btn-block btn-md btn-inverse"&gt;Weather&lt;/a&gt;
          &lt;a href="#fakelink" id="button" class="btn btn-block btn-md btn-inverse"&gt;Stocks&lt;/a&gt;
          &lt;a href="#fakelink" id="button" class="btn btn-block btn-md btn-inverse"&gt;News&lt;/a&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--[if lt IE 7]&gt;
        &lt;p class="browsehappy"&gt;You are using an &lt;strong&gt;outdated&lt;/strong&gt; browser. Please &lt;a href="http://browsehappy.com/"&gt;upgrade your browser&lt;/a&gt; to improve your experience.&lt;/p&gt;
      &lt;![endif]--&gt;
  
      &lt;!-- Add your site or application content here --&gt;
      &lt;div class="viewport" ng-include="'views/home.html'" ng-controller="MainCtrl"&gt;&lt;/div&gt;
      &lt;div class="viewport" ng-include="'views/first.html'" ng-controller="MainCtrl"&gt;&lt;/div&gt;
      &lt;div class="viewport" ng-include="'views/first.html'" ng-controller="MainCtrl"&gt;&lt;/div&gt;
      &lt;div class="viewport" ng-include="'views/first.html'" ng-controller="MainCtrl"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!--[if lt IE 9]&gt;
      &lt;script src="bower_components/es5-shim/es5-shim.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/json3/lib/json3.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
      &lt;!-- build:js scripts/vendor.js --&gt;
      &lt;!-- bower:js --&gt;
      &lt;!-- endbower --&gt;
      &lt;!-- endbuild --&gt;
  
          &lt;!-- build:js({.tmp,app}) scripts/scripts.js --&gt;
          &lt;script src="scripts/app.js"&gt;&lt;/script&gt;
          &lt;script src="scripts/controllers/main.js"&gt;&lt;/script&gt;
          &lt;!-- endbuild --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>html {
      height: 100% !important;
      width: 100%;
      margin: 0px;
  }
  
  body {
      background-color: #f39c12;
      overflow: hidden;
      height: 100% !important;
  }
  
  #title {
  }
  
  
  
  #sidebar-bar-static {
      margin-left: 25px;
      position: fixed;
      color: #1abc9c #34495e;
  }
  
  #sidebar-back-drop {
      margin-left: 12px;
      margin-top: 10px;
      width: 124px;
      height: 181px;
      position: fixed;
      background-color: #1abc9c;
      border-radius: 6px;
  }
  
  #button {
      width: 121px;
      height: 41px;
  
  .viewport {
      height: 100% !important;
  }
  </code></pre>