时间戳

首页 > 解决方案 > 未占用 100% 空间的子组件（角度材料选项卡）

css - 未占用 100% 空间的子组件（角度材料选项卡）

问题描述

我需要角度标签的子组件来占用给定空间的 100%（侧面有 20% 的空白部分。我能够让它工作，请参阅这个 stackblitz：

https://stackblitz.com/edit/angular-material2-custom-tabs-3gdeu4

层次结构如下：

AppComponent
    ----> TabComponent (inside AppComponent)
            ----> ComponentA (inside TabComponent)

为了使它起作用，我使bodyofindex.html的高度为100vh（参见styles.css）

我不明白为什么tab.component.cssand component-a.component.cssthen 还需要设置 100% 的高度？（如果将其从其中一个中删除，它将停止占用整个空间）

host:使用with的全部意义不display: grid在于子组件会自动获取 100% 的内容吗？难道我做错了什么？

标签： cssangularangular-materialcss-grid

解决方案

CSS 网格布局通过调整元素的所有直接子元素的大小来工作display: grid。子子级不会调整大小。因此，您<app-tab>只会调整其单个直接子项的大小<mat-tab-group>，而您<app-component-a>只会调整其单个直接子项的大小<span class="test">。这些是您应用网格布局的唯一地方。正如您所发现的，这不会达到您想要的效果，因此您不得不求助于其他方法。

推荐阅读