Angular 2和黄金布局高度没有问题 - 不接受百分比高度

Question

我面临一个棘手的问题，角度2和黄金布局组件不接受高度百分比。 （但是将宽度设置为100％有效）。 任何帮助深表感谢。

此处的Plunker：http://plnkr.co/edit/tUQOev?p=preview

@Component({

选择器：'my-app'，   提供者：[TestService]，   模板： <div> <h2>Value: {{testService.testValue}}</h2> <div><button (click)="testService.add()">Change Value</button></div> <div style class="layout" gl></div> </div> ，   款式：[      .layout{ width:100%; height:100%}   ]   指令：[GlDirective] }）

1. 当我给出布局时：宽度：100％;身高：400px - 它可以正常工作



1. 但是当我尝试给出高度时：100％布局根本无法识别高度并且无法正确渲染。



非常感谢提前。

Answer 1

您的Plunker不适用于我，但这看起来很像标准CSS 100％高度欺骗。

请尝试使用height:100%

，而不要使用height:100vh

使用height:100%时，是说元素应与其父级具有相同的高度，但是默认情况下，父级元素的高度为0，然后开始增长以适合其内容。因此，最终您得到了以父代为基础的高度，而子代为基础的高度。令人困惑，对不对？因此，只有其中一个使用固定高度（例如您使用height:400px时）或height:100vh之类的意思是“与屏幕一样高”的东西时，结果才有效。

您还可以检出This Stackoverflow Question并获得有关同一问题的更多答案。