100% height div in angularjs (ng-scope class issue)

Question

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:

Demo: http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content

Explanation: http://www.minimit.com/articles/solutions-tutorials/fullscreen-backgrounds-with-centered-content

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).

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:

http://jsfiddle.net/x3zbufhk/

by simulating the ng-scope class with:

#ng-scope {
    height: 100%;
    background-color:red;
}

So, is there any way of having 100% height divs in angularjs without modifying the height of ng-scope?

Thanks a lot!

EDIT: By 100% height div, I mean a div that is 100% height of the browser window.

Answer 1

This is a bit hacky, and doesn't entirely answer your question (how to do this without modifying ng-scope), but it does work.

html, body, .ng-scope {
  height: 100%;
}

Or with Bootstrap

html, body, .ng-scope, .container-fluid, .row {
  height: 100%;
}

Answer 2

Just use min-height: 100% instead of height: 100% on #ng-scope FIDDLE