html - 如何让 Quasar q-page-container 孩子使用其祖父母的全高？

我有一个 Quasar 布局，以及一个需要填充 100% 元素高度的q-page-container组件。问题是容器没有完全展开以覆盖整个高度（与使用绝对定位的抽屉不同）。

我见过的所有解决此问题的 CSS 技巧都会干扰父容器的属性，我不愿意这样做以确保不会破坏内部 Quasar 布局所需的任何属性。div将容器的子级设置为height: 100%没有影响，将其设置为绝对值，例如100px正确设置高度，但我需要它来适应浏览器视口。

我已经设置了一个小提琴来说明这里的问题。

在这种情况下，我想#troublemaker填充其容器的整个高度 - 或者更确切地说，它的祖父母减去标题高度，因为父容器只是扩展到内部的任何内容。

PS：CSS 布局和定位对我来说似乎总是违反直觉的，所以如果有人对资源有一些好的建议来学习如何更好地理解它的逻辑，我将非常感激！

标签： htmlcssquasar-framework

如果你有一个div内部 a q-page，我发现正确的方法是让组件div继承min-heightCSS 属性q-page。

我更新了小提琴以显示它：https ://jsfiddle.net/u39qbrpj/4/

#troublemaker {
  min-height: inherit;
  background-color: green;
}