如何使Quasar q-page-container的子元素使用其父级容器的完整高度？

Question

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

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

我已经准备好了一个演示案例the problem here。

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

PS：CSS 布局和定位对我来说一直很不直观，如果有人有关于如何更好地理解其逻辑的资源建议，我会非常感激！

- Denton

Answer 1

如果你在一个q-page里面有一个div，我发现正确的方法是让div继承q-page组件的min-height CSS属性。

我更新了这个 JSFiddle 来展示它：https://jsfiddle.net/u39qbrpj/4/

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

- dalys

---

这很有用！但是，我的QScrollArea需要设置height而不是min-height，以便其内容（一个QTable）出现。然而，父级QPage明显使用min-height。我现在知道如何继承min-height，但我是否可以将height设置为min-height？或者我应该采用不同的方法来解决这个问题？ - hans_meine

我通过研究 https://codepen.io/cp-tof06/pen/bGdKXpW 找到了解决方案。现在我在 QScrollArea 上使用 class="column full-height"，而不是样式属性。显然，弹性布局使一切都神奇地工作了（只需在 QScrollArea 和其中的 QTable 上使用 col 类，而无需任何样式属性）。 - hans_meine

Answer 2

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

所以只需用q-page替换你的div即可正常工作。 这是修复后的代码：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

- H3r3zy

---

谢谢您的建议！这对于 q-page 元素有效，但如果我包含另一个组件，则会带有它自己的 div，我无法将其指定为 q-page，除非在组件内部进行修改。此外，使用 CSS 辅助类 fit 和 full-height 也不起作用。在这种特殊情况下，似乎 style='height: 100vh; padding-top: -50px;' 可以解决问题。这是可行的解决方案吗？ - Denton

以上应该是 margin-top，而不是 padding-top。 - Denton

你可以通过 height: calc(100vh - 50px); 来实现这个技巧。这里有一个 JSFiddle 来解释：https://jsfiddle.net/yghL6so8/2/ - H3r3zy

这太酷了！我怎么错过了这么长时间？我认为这是解决这个问题最干净的方案。 - Denton

这是一个赢家：.google-map { 宽度：100％; 高度：calc（100vh - 50px）; 边距：0自动; 背景：灰色; 位置：无; } - bkomac

只有当您将导航标题设置为50px时，此方法才有效。但是，如果您有其他大小，您无法保持一致性。请记住使用$变量或其他方法来解决这个问题。 - Gkiokan

Answer 3

在编程中，使用 q-page-container 内的 q-page 组件是最常见的方法。根据文档，q-page 必须位于 q-page-container 中。然而，如果你想把一个 div 放到容器中并让它填满整个容器，可以使用 class="fit"，这样 div 就会填满整个容器。

- julie

---

我尝试了这个：在一个q-page中放置一个<div class="fit"><q-btn .../></div>，但是该div没有占满整个高度。 - A.W.