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

Question

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

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

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

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

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

Answer 1

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

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

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

Answer 2

我认为q-page-container需要一个q-page.

所以只需将您div的替换为 aq-page就可以了。这是你的小提琴固定：https : //jsfiddle.net/uab1rnjh/2/

或者，如果您真的想使用div.
你可以用 css 来解决这个问题：height: calc(100vh - 50px);
这是你的 div 小提琴：https : //jsfiddle.net/yghL6so8/2/

在文档中可以看到 QPageContainer 封装了一个 QPage。在：https : //quasar.dev/layout/page#QPageContainer-API