我有一个 Quasar 布局和一个组件，我需要填充 q-page-container 元素高度的 100%。问题是容器没有完全展开以覆盖整个高度（不像抽屉，它使用绝对定位）。
我见过的所有解决此问题的 CSS 技巧都会干扰父容器的属性，我不愿意这样做以确保不会破坏内部 Quasar 布局所需的任何属性。将容器的子div设置为height: 100%没有影响，将其设置为100px等绝对值确实可以正确设置高度，但我需要它来适应浏览器视口。
我已经设置了一个小提琴来说明the problem here。
在这种情况下，我希望 #troublemaker 填充其容器的整个高度 - 或者更确切地说，它的祖父级减去标题高度，因为父级容器只是扩展到内部的任何内容。
PS：CSS 布局和定位对我来说似乎总是违反直觉，所以如果有人对资源有一些好的建议来学习如何更好地理解它的逻辑，我将不胜感激！
【问题讨论】：
标签： html css quasar-framework
在 q-page-container 中使用 q-page 无疑是最常见的方式。根据文档，q-page 必须位于 q-page 容器中。但是，如果您想在容器中放置一个 div 并让它充满容器，您可以使用 class="fit" 并且 div 将填充整个容器。
【讨论】：
如果您在q-page 中有一个div，我发现正确的方法是让div 从q-page 组件继承min-height CSS 属性。
我更新了小提琴以显示它：https://jsfiddle.net/u39qbrpj/4/
#troublemaker {
min-height: inherit;
background-color: green;
}
【讨论】：
height 而不是 min-height 才能显示其内容（QTable）。然而，父 QPage 显然使用 min-height。我现在知道如何继承min-height，但我能以某种方式将height 设置为min-height吗？还是我应该以不同的方式处理这个问题？
class="column full-height"。显然，flex 布局使这一切都神奇地工作（仅在 QScrollArea 和 QTable 上使用 col 类，没有任何样式属性）。
我认为q-page-container 需要q-page。
因此，只需将您的 div 替换为 q-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
【讨论】：
q-page 元素，但如果我包含另一个组件，则它是自己的 div，如果不在内部修改组件本身，我无法将其指定为q-page。此外，使用 CSS 帮助程序类 fit 和 full-height 也不起作用。在这种特殊情况下，style='height: 100vh; padding-top: -50px;' 似乎可以解决问题。这是一个可行的解决方案吗？
margin-top，而不是padding-top。
height: calc(100vh - 50px);来达到目的，这里有一个小提琴来解释：jsfiddle.net/yghL6so8/2