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

Question

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

所有 CSS-tricks 我见过的解决此问题的方法都会干扰 parent 容器的属性，我不愿意这样做以确保我不会破坏任何必要的属性用于内部类星体布局。将容器的 child div 设置为 height: 100% 没有影响，将其设置为绝对值 100px 确实可以正确设置高度，但我需要它来适应到浏览器视口。

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

在这种情况下，我希望 #troublemaker 填充其容器的整个高度 - 或者更确切地说，它的总 parent 减去 header 高度，因为 parent 容器简单地扩展到里面的任何内容。

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

Answer 1

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

因此只需将您的 div 替换为 q-page 即可。这是你的 fiddle 修复：https://jsfiddle.net/uab1rnjh/2/

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

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

Answer 2

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

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

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

Answer 3

在 q-page-container 中使用 q-page 无疑是最常见的方式。根据文档，q-page 必须位于 q-page 容器中。但是，如果您想将 div 放入容器中并让它填满容器，您可以使用 class="fit" 并且 div 将填满整个容器。

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

How to make a Quasar q-page-container child use full height of its grandparent?

html

css

quasar-framework