CODEWITHSUNDEEP
javascriptcssangularangular-material
Nikit Srivastava
Nikit Srivastava

Reputation: 57

Angular Material 2 md-tab content height

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

<md-tab-group>
  <md-tab label="Tab 1"><div class="content-style">Content 1</div></md-tab>
  <md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>

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 {}

Upvotes: 4

Views: 2214

Answers (1)

Bilal Ahmed
Bilal Ahmed

Reputation: 381

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

Upvotes: 3

Related Questions