将子div的高度绑定到父高度

Question

将子div的高度绑定到父高度似乎不起作用

<div #parentdiv style="background-color:blue;height:1000px">
    <div style="background-color:red" [style.height.px]="parentdiv.height">
      hallo
    </div>
</div>

这是一个傻瓜 https://plnkr.co/edit/ifWbZSQ9FeiV6n1g9bes?p=preview

Answer 1

使用CSS可以有很多方法（例如，检查Pankaj的答案）。但如果你真的需要使用javascript（相信我，你没有），那么使用offsetHeight属性：

<div #parentdiv style="background-color:blue;height:1000px">
  <div style="background-color:red" [style.height.px]="parentdiv.offsetHeight">
    hallo
  </div>
</div>

演示： https://plnkr.co/edit/QEH4fNoZlmTCn34hnh12?p=preview

话虽这么说，我在这里发布的内容仅用于教育目的，而不是CSS方法。

Answer 2

可以通过CSS height: inherit

轻松实现

@Component({
  selector: 'my-app',
  styles: [`
    .myHeight{
      height: inherit;
      background-color:red;
    }
  `]
  template: `
    <div #parentdiv style="background-color:blue;height:1000px">
        <div class="myHeight">
          hallo
        </div>
    </div>
  `,
})

Demo