css - 试图将子组件的高度设置为祖先的高度

Question

我设置了渲染的组件，如下图所示。

这是 MainComponent，它使用类“内容”呈现 div

<shared-top-control-bar></shared-top-control-bar>
<div class="content">
  <router-outlet></router-outlet>
</div>
<shared-footer-bar></shared-footer-bar>

具有类内容的 div 以 907px 的高度正确报告。

当 PointOfSale（app-point-of-sale）组件被渲染时，它的内容高度约为 6.4k px，因此 app-point-of-sale 的高度为 6.4k px。因此，当将 pos-wrapper div 的高度设置为 100% 时，它会将高度设置为 6.4k 像素，而我真的希望它是 907 像素。

我对 CSS 和 Angular 还是很陌生。我可以只使用服务来跟踪高度并将服务注入需要它的组件。只是想看看是否有 CSS 方法可以做到这一点。

谢谢

标签： cssangular

Answer 1

在嵌套组件内部，如果您创建一个样式为 100% 的 div，它将占用父容器的高度。 https://stackblitz.com/edit/angular-17vrmg 看看这个例子。