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

Question

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

Plunker 在这里：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. 当我给出布局时：宽度：100%； height : 400px - 它可以正常工作，如下所示

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

非常感谢。

Answer 1

你的 Plunker 不适合我，但这看起来很像标准的 CSS 100% 高度诡计。

不要使用height:100% 尝试使用height:100vh

当您使用height:100% 时，您的意思是该元素应该与它的父元素 具有相同的高度，但默认情况下，父元素从 0 高度开始并增长以适应其内容。因此，您最终会得到父母的身高基于孩子的身高，而孩子的身高则取决于父母的身高。令人困惑，对吧？因此，只有当其中一个使用固定高度时，例如您使用 height:400px 或 height:100vh 之类的东西，它才有效，这意味着“与屏幕一样高”。

您还可以查看This Stackoverflow Question 以获取有关同一问题的更多答案。