title: 100% height div in angularjs (ng-scope class issue)
body: <p>I want to put a 100% height image in my front page that fills the whole screen, and then show other images and text when scrolling. I followed this guide to do so:</p>
  
  <p>Demo: <a href="http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content" rel="nofollow">http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content</a></p>
  
  <p>Explanation: <a href="http://www.minimit.com/articles/solutions-tutorials/fullscreen-backgrounds-with-centered-content" rel="nofollow">http://www.minimit.com/articles/solutions-tutorials/fullscreen-backgrounds-with-centered-content</a></p>
  
  <p>The issue is that, as far as I am concerned, if you want to have a div that is 100% the height of the browser window, you need to give 100% height to all its parent elements. Therefore, in order to make this work in angularjs I have given 100% height to html, body and ng-scope (using min-height:100% does not work).</p>
  
  <p>The problem is that having height:100% in the ng-scope class leads to some unwanted behavior. For example, if I want to add a footer (which is static, outside the ng-view directive), the footer is displayed right after the first 100% height, instead of appearing at the end of the page, something like what I simulated here:</p>
  
  <p><a href="http://jsfiddle.net/x3zbufhk/" rel="nofollow">http://jsfiddle.net/x3zbufhk/</a></p>
  
  <p>by simulating the ng-scope class with:</p>
  
  <pre><code>#ng-scope {
      height: 100%;
      background-color:red;
  }
  </code></pre>
  
  <p>So, is there any way of having 100% height divs in angularjs without modifying the height of ng-scope?</p>
  
  <p>Thanks a lot!</p>
  
  <p><strong>EDIT</strong>: By 100% height div, I mean a div that is 100% height of the browser window.</p>