html - 如何让 Quasar q-page-container child 使用其祖 parent 的全高？

Question

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

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

我设置了一个 fiddle 来说明 the problem here .

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

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

Answer 1

如果在 q-page 中有一个 div，我发现正确的做法是让 div 继承min-height 来自 q-page 组件的 CSS 属性。

我更新了 fiddle 以显示它:https://jsfiddle.net/u39qbrpj/4/

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