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:


by simulating the ng-scope class with:

#ng-scope {
    height: 100%;

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.

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