title: ng-view height 100% overflow
body: <p>I’m building an app in angularjs and my index page has a ng-view where all content is injected with ui-router:</p>
  
  <pre><code>&lt;header&gt;
      &lt;nav class="navbar"&gt;
          //navbar content here
      &lt;/nav
  &lt;/header&gt;
  
  &lt;div ng-view&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The problem here is that my home page needs to have 100% height - it is injected in ng-view, therefore I'm setting ng-view’s height to 100%. 
  Now, when every other ng-view page is rendered I have a vertical overflow on the page - height of the ng-view (100%) plus whatever is the menu’s height, as it is outside of ng-view.</p>
  
  <p><a href="http://embed.plnkr.co/c4b5W7j54OCAIGcchytv/preview" rel="nofollow">Here is a plunker example</a></p>
  
  <p>How can I fix this?</p>
  
  <hr>
  
  <p>Even though I accepted the answer, I still had the problem, because my home page needed to have 100% height, but css calc would cut the specified percentage out and overflow-y hidden wouldn't let me scroll down. I ended up using Viewport Percentage - setting the ng-view div to 100vh in my css fixed the problem for me. </p>
  
  <pre><code>height: 100vh;
  </code></pre>