样式组件选择器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样式设置为宽度等于其容器的高度。我的最终目标是.childWrapper与.someDiv具有相同的宽度和高度，但我不想将JS带入业务

我申请了

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

但app-child仍为0x0px。我尝试设置一些随机宽度和高度，app-child始终保持0x0px。将样式应用于.someDiv可以按预期工作。

这里发生了什么？为什么不能将样式应用于组件选择器？

Answer 1

考虑到孩子的上述CSS，它占据了父母身高的100％。问题是父级没有明确的高度设置。尝试设置someDiv的高度。

请参阅此代码：Full height child div

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

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