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

Question

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

此处为柱塞http://plnkr.co/edit/tUQOev?p=preview

@Component({
  selector: 'my-app',
  providers: [TestService],
  template: `
    <div>
      <h2>Value: {{testService.testValue}}</h2>
      <div><button (click)="testService.add()">Change Value</button></div>
      <div style class="layout" gl></div>
    </div>
  `, 
  styles: [
    `
    .layout{ width:100%; height:100%}
    `
  ]
  directives: [GlDirective]
})

1. [当我给出layout：Width：100％; height：400px-如下所示效果很好

2. 但是当我尝试指定高度时：100％布局根本无法识别高度，并且无法正确呈现。

非常感谢。

Answer 1

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

代替使用height:100%，请尝试使用height:100vh

[当您使用height:100%时，您要说的是元素应与其parent具有相同的高度，但是默认情况下，父元素以0高度开始并增长以适合其内容。因此，最终您得到了以父代为基础的高度，而子代为基础的高度。令人困惑，对不对？因此，仅当其中之一使用固定高度（如您使用height:400px时）或类似height:100vh之类的东西（表示“与屏幕一样高”）时，才可行。

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