使用 Flexbox 获取所有可用高度的组件（在 Quasar/Vue 中）

Question

我正在构建一个带有页眉/主要内容/页脚的组件，其中主要内容将是可滚动的。虽然我可以在 Js 中执行此操作，但我需要该组件占用高度上的所有可用空间并将页脚置于底部。即使代码是正确的，我也无法让它占据整个高度。

这是一支带有不起作用代码的笔：https://codepen.io/SharpBCD/pen/MNgxgY

    .panel {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    flex-grow: 1;

    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */

    background-color: #00acc1;
  }
   .panel-header{
    flex: 0 1 auto;
    /*max-height: fit-content;*/
  }
  .panel-main{
    /*margin-bottom: auto;*/
    display: flex;
    flex-direction: column;
    flex: 1; /* same as flex: 1 1 auto; */
    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */
    background-color: #0d47a1;
  }
  .panel-footer{
    margin-top: auto;
    max-height: fit-content;
  }

这是一个带有我尝试过的工作代码的jsfiddle： https: //jsfiddle.net/MadLittleMods/LmYay/

.flexbox-parent
{
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */

    background: rgba(255, 255, 255, .1);
}

.flexbox-item-grow
{
    flex: 1; /* same as flex: 1 1 auto; */
}
.fill-area
{
    display: flex;
    flex-direction: row;

    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */

}

所以有什么问题？我做错了什么？

Answer 1

把责任交给家长

如果不进行额外的修补，让组件负责占据整个空间对我来说并不成功。一个更简单的解决方案是使用items-stretcha 的类row，然后将 a 放入col进行拉伸。
这对其他人来说可能更直观。

如下图所示q-card作为示例。row只要您使用适当的/类，这应该适用于您选择的任何子组件col。

<q-page id="addressesOverview" class="q-pa-md row items-stretch">
  <q-card class="col-12">
    <q-card-section> ... </q-card-section>
  </q-card>
</q-page>

如果您有一个通用组件来显示q-page，您可以将其更改为:class并动态添加该类items-stretch。

链接：Quasar Docs - Flexbox - 对齐