Angular Material 2 md-tab content height

Question

I'm new to angular material and I'm trying to implement md-tab into my app. But, I'm not able to style my tab content to acquire the remaining height of the screen. Could anyone please look into the plunker and point out where am I going wrong? Following is the link to plunker: https://plnkr.co/edit/gfKhz3IcMjPHS7F8Up50?p=preview tabs-overview-example.html ```

Content 1

Content 2

``` tabs-overview-example.css ``` html{ height:100%; } body { height:100%; margin:0; overflow: auto; } md-tab-group{ height: 100%; } .content-style { height: 100%; background-color:#fffbda; } ``` tabs-overview-example.ts ``` import {Component} from '@angular/core'; @Component({ selector: 'tabs-overview-example', templateUrl: './tabs-overview-example.html', styleUrls: ['./tabs-overview-example.css'] }) export class TabsOverviewExample {} ```

Accepted Answer

You can make use of vh: 1vh is equal to 1% height. That is to say, 100vh is equal to the height of the browser window 100%, regardless of where the element is situated in the DOM tree:

`.content-style { height:100vh; background-color:#fffbda; }`

reference: https://www.w3.org/TR/css3-values/#viewport-relative-lengths

Angular Material 2 md-tab content height

Solution

Problem