スタイルコンポーネントセレクタDOM要素

Question

私は、コンポーネント階層を持っている：

appParent.html 
    <app-parent> 
     <div class="someDiv"> // has width and height set 
     <app-child></app-child> 
     </div> 
    </app-parent> 

appChild.html：

<div class="childWrapper"></div> 

私は幅にそのコンテナに等しい高さを持つようにapp-childのスタイルをしたいと思います。私の究極の目標は.someDivと.childWrapperを同じ幅と高さを持つことですが、私は

app-child{ 
    width:100%; 
    height:100%; 
} 

を適用したがapp-childが0x0pxまま事業

にJSを持参する必要はありません。ランダムな幅と高さを設定しようとしましたが、app-childは常に0x0pxのままです。 .someDivにスタイルを適用すると、正常に動作します。

ここでは何が起こっていますか？コンポーネントセレクタにスタイルを適用できないのはなぜですか？

Answer 1

子供に上記のCSSが与えられた場合、それは親の身長の100％を占めています。問題は、親に明示的な高さが設定されていないことです。 someDivの高さを設定してみてください。

このcodepenを参照してください。申し訳ありませんFull height child div

.someDiv { 
    border:1px solid red; 
    height:100px; 
    width:200px; 
} 

.childWrapper { 
    border: 1px solid blue; 
    width:100%; 
    height:100%; 
}