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

Question

我面临一个棘手的问题，角度 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%；高度：400px - 它工作正常，如下所示

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

提前谢谢了。

Answer 1

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

而不是使用height:100%尝试使用height:100vh

当您使用时，您是在说元素应该具有与其parentheight:100%相同的高度，但默认情况下，父元素以 0 高度开始并增长以适应其内容。因此，您最终会得到父级基于子级的高度，而子级基于父级的高度。令人困惑，对吧？因此，只有当其中一个使用固定高度（例如您使用时）或类似“与屏幕一样高”的东西时，它才有效。height:400pxheight:100vh

您还可以查看此 Stackoverflow 问题，了解有关同一问题的更多答案。