Clever Geek Handbook

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

I want to put a 100% height image on my first page that fills the entire screen, then show other images and text as I scroll. I followed this tutorial to get it done:

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 problem is that, as far as I know, if you want to have a div 100% taller than the height of the browser window, you need to give 100% height to all of its parent elements. So to make this work in angularjs I gave 100% of the html, body and ng-scope heights (using min-height: 100% doesn't 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 immediately after the first 100% of the 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 a way to have 100% divs height in angularjs without changing the ng-scope height?

Thank you so much!

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

+3


source to share


3 answers


This is a bit hacky and doesn't fully answer your question (how to do it without changing ng-scope), but it works.

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


Or with Bootstrap

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


source


Just use min-height: 100%

instead height: 100%

on FIDDLE#ng-scope



+1


source


This is how I fixed this issue when using Wijmo FlexGrid and AlgularJS.

I am trying to edit a multi-line textbox in a celltemplate of my grid. When I go into edit mode, wijmo inserts a div around my textbox with the ng-scope class. As you can see, the .ng-scope {height: 100%} is resizing across your entire page. If you are using F12 / Developer tools in your browser, you can check the elements around the attribute you are trying to change. In my case it looked like this:

devtoolsimage

the offending div was ng-scope , which had a height of 144px.

I have added an override to my site.css based on the nested class .wj-cell.ng-scope

enter image description here

This will only change ng-scope if its parent class has wj-cell class.

+1


source






More articles:


All Articles