綁定孩子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