绑定孩子div的高度，以父母身高

Question

binding子div的高度，以父母身高似乎并没有工作

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

这里是一个plunkr 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