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

angular body ( height: 100)
angular material
angular app-root height 100
angular component height

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.

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

100% height div in angularjs (ng-scope class issue) - css - html, 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​  It would be a nice feature if md-content takes 100% of the available vertical space. Currently I am using the current offset and height of the window for setting the height of the md-content.

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

css 100% height div in angularjs (ng scope class issue)?, css 100% height div in angularjs (ng scope class issue)?. #ng-scope height: 100​% min-height: 100%. Hey, thanks a lot. For some reason using min-height in  Dismiss Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

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.

100% height on body element causing issues · Issue #681 · angular , I am using bootstrap and I have set one of my row elements to be 500 What is the intention of setting height: 100%; in angular-material.css ? Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

Instead of using

{
height : 100%
}

try this instead

{
height: 100vh;
}

Layout > Introduction, Below is an example usage of the Responsive Layout API: <div> <div class="​ng-scope layout-row"> <div class="flex">First item in row</div> <div max-height​: 100%; } .layout-column .flex-33 { max-width: 100%; max-height: calc(100% / 3); }​  So what I'm looking for here is for the accordion sidebar to be at 100% height as well as the Google Maps control. Any clues on how to do so? So far I have the html and body height set at 100% and the container-fluid set at min-height 100%: html, body {height: 100%;}.container-fluid {min-height: 100%;} But I cannot get anything else to stretch

Developer Guide: Working With CSS, ng-scope. Usage: AngularJS applies this class to any element for which a new that is attached to a data binding, via ng-bind or {{}} curly braces, for example. How to set the height of a div to 100% using CSS. Topic: HTML / CSS Prev|Next Answer: Set the 100% height for parents too. If you will try the set the height of a div container to 100% of the browser window using the style rule height: 100%; it doesn't work, because the percentage (%) is a relative unit so the resulting height depends on the height of parent element's height.

Add remove Class with ngClass in AngularJS, In ngClass directive either you can just pass the $scope variable which In the first <div> set the ng-class='{ div: true, red: class1 }' directive where adding two classes .div and .red . <style> .div{ width: 100px; height: 100px; border: 1px solid black; Take the above example and modifying some parts. OK, so I found the issue. It is because somewhere in the Blazor code CSS is being set for @media classes. Once I over rode that and the html, body with height: 100%, the control did maximize to 100%.

Animations: the Angular Way, 'Thinking in Angular' is something that can elude developers who come from jQuery or. First, let's take a look at a simple example of a CSS3 transition, and then we Let's create a simple div inside a container div and apply two classes to it: directive to switch the class based on the value of a boolean on the $​scope . Sometimes things don't add up. If you want to have inline-block elements that add up to 100% width, then these tips just might make your day.

Comments
  • 100% height = 100% document height?
  • Yes, sorry because it is probably unclear. I want a div that is 100% the height of the browser. Thank you!
  • 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.
  • 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
  • Did you ever manage to solve this? I'm facing the exact same problem
  • 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...