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.

Yes, sorry because it is probably unclear. I want a div that is 100% the height of the browser. Thank you! — user1294122
– user1294122, Commented Jan 4, 2015 at 13:48
The minimit website isn't loading for me. Are you looking for something like this? On a side note, using #ng-scope is the ID ng-scope not the class. — Maxime Morin
– Maxime Morin, Commented Jan 4, 2015 at 14:22
Hey, thanks a lot for your answer. I want this behavior for long content inside the .ng-scope class: jsfiddle.net/getg811q and this behavior for short content: jsfiddle.net/hcpr96ar . But I don't know how to accomplish this, since for the short content you need html, body and ng-scope to have height:100%, while for the long content the footer is wrongly placed with that configuration: jsfiddle.net/x3zbufhk — user1294122
– user1294122, Commented Jan 4, 2015 at 20:05
Did you ever manage to solve this? I'm facing the exact same problem — Daniel
– Daniel, Commented Jul 16, 2015 at 20:31

jmknoll · Accepted Answer · 2015-03-03 04:34:31Z

5

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%;
}

answered Mar 3, 2015 at 4:34

jmknoll

1,0545 gold badges11 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anubhav · Accepted Answer · 2015-01-04 20:27:01Z

1

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

answered Jan 4, 2015 at 20:27

Anubhav

7,2465 gold badges23 silver badges34 bronze badges

1 Comment

user1294122 Over a year ago

Hey, thanks a lot. For some reason using min-height in .ng-scope does not work to make the image 100% size of the window (following the tutorial that I linked), but you are totally right it works with the text that I used to simulate the issue in fiddle. Let me try to figure out why...

D. Kermott · Accepted Answer · 2016-10-19 18:58:54Z

Here's how I fixed this problem while using Wijmo FlexGrid and AlgularJS.

I'm trying to edit a multi-line textarea within the celltemplate of my grid. When I get into edit mode then wijmo inserts a div around my textarea with a class of ng-scope. As you noticed changing the .ng-scope { height: 100% } royally screws with your whole page. If you use the F12 / Developer tools in your browser you can inspect the elements around the attribute you are trying to resize. In my case it looked like this:

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

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

This will only modify ng-scope when its parent has a class of wj-cell.

G5W · Accepted Answer · 2018-06-17 20:16:49Z

1

Instead of using

{
height : 100%
}

try this instead

{
height: 100vh;
}

edited Jun 17, 2018 at 20:16

G5W

37.8k10 gold badges57 silver badges85 bronze badges

answered Jun 17, 2018 at 20:12

Vikas Yadav

112 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related