ng-grid height in %. 100% of parent container

Question

In the ng-grid i need to set the height to 100% so that it is always of the height of the parent container(another div wrapping the grid div) even on window resize. How do i Do it ? {height : 100%} does not resolve this?

Answer 1

https://github.com/angular-ui/ng-grid/issues/80

In the very end the saviour added the answer. height 100% is allowed with the latest versions.Also after that for me the header remains constant

Answer 2

This is what worked for me.

.ui-grid {
  position: absolute;
  height: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Someone in this thread, linked by @dcryan22, mentioned a partial version of this answer. I figured it would be helpful to include the actual full code from the solution here in an answer.

Note that these properties are set on the child element .ui-grid, not just the directive itself.

Answer 3

This article gave the answer of using CSS viewport. Works perfectly for me!

I added this to the CSS:

.ui-grid {
    height: 98vh;
}

I'm using twitter bootstrap as well, but didn't even need any extra divs or containers.