Question

我是角度素材的新手，我正在尝试将md-tab应用到我的应用中。但是，我无法设置我的标签内容的样式以获取屏幕的剩余高度。任何人都可以请一下，然后指出我哪里出错了？以下是plunker的链接： https://plnkr.co/edit/gfKhz3IcMjPHS7F8Up50?p=preview

的突片-概述-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>

突片-概述-example.css

html{
  height:100%;
}
body {
  height:100%;
  margin:0;
  overflow: auto;
}
md-tab-group{
  height: 100%;
}
.content-style {
  height: 100%;
  background-color:#fffbda;
}

突片-概述-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 {}

Answer 1

你可以使用vh：1vh等于1％的高度。也就是说，无论元素位于DOM树中的哪个位置，100vh都等于浏览器窗口的高度100％：

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

参考：https://www.w3.org/TR/css3-values/#viewport-relative-lengths

角度材料2 md-tab内容高度

1 个答案: