angular/components

[Tabs] Md-tab height: 100% does not give all height of group

Open

#4,591 创建于 2017年5月16日

在 GitHub 查看
 (18 评论) (0 反应) (0 负责人)TypeScript (24,044 star) (6,650 fork)batch import
P4area: material/tabshelp wanted

描述

Hi,

I'm having problems to adjust content of a tab to 100% of height of md-tab-group

For example:

<md-tab-group style="background-color: lightblue; height: 100%">// this works all bk is blue
<md-tab label="Info" style="background-color: indianred; height: 100%">//not work
<div style="background-color: yellow; height: 100%"></div>//with % not work, with px works
</md-tab>
</md-tab-group>

My problem is that md-tab-group expands his height to total of height. But the atribute height of md-tab doesn't fit to 100% of md-tab-group.

Because of that the content, even if I set the height to 100% it doesn't fit to 100% of height

If I set thet height attribute of the <div> to for example 500px it works correctly

I have this problem since I added <!doctype html> to my index.html

Versions: Beta.5 Angular 4

What would be doing wrong?

贡献者指南

技术栈
typescripthtmlcss
领域
frontend
议题类型
bug
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
3
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
1-3 hours
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
stale
清晰度议题是否清楚说明期望改动、验收标准和下一步。
mostly clear
前置要求
basic Angular knowledgeCSS layout understanding
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
40
研究方向
Investigate the CSS height inheritance issue in the Angular Material tab group. Look at the `md tab group` and `md tab` component styles, especially how they handle percentage heights. The issue may be related to the parent not having an explicit height or a missing height on intermediate DOM elements. Check for any CSS containment or display properties affecting height calculation. Also consider the impact of the HTML5 doctype on box sizing and rendering mode.