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

Question

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

这是一支带有无效代码的笔：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

只是您的 <html> 和 <body> 没有占据整个页面，子节点也一样……只需将其添加到您的 css ：

html,body,#q-app,.q-pa-md {
  height:100%;
  width: 100%;
}

codepen

Answer 2

如果你想使用 flex 模型并将你的#q-app 放在 window 的整个高度上，你需要从根开始构建 flex 布局。

您可以使用以下样式:

 /* update */
#q-app {
  height:100vh;/* or min-height:100vh if you want it to grow */
  display:flex;
}
.q-pa-md{
  flex:1;
  display:flex;
  flex-direction:column;
}
 /* end update */

演示 （片段到运行或分叉代码笔）:

/* update */
body {
  margin:0;
  }
#q-app {
  min-height:100vh;
  display:flex;
  }
.q-pa-md{
  flex:1;
  display:flex;
  flex-direction:column;
  }
 /* end update */
.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;
  }

<!--
  Forked from:
  https://quasar.dev/layout/grid/column#Example--Equal-Height-Example
-->
<div id="q-app">
  <div class="q-pa-md">
    <p> irelevant text to ocupy space before panel</p>
      <div class=" panel">
        <div class=" panel-header">
          I'm a header
        </div>
        <div class = "panel-main">
          Main content
        </div>
        <div class=" panel-footer">
          I'm a footer
        </div>
      </div>
    </div>
</div>

或者玩叉子https://codepen.io/gc-nomade/pen/RXbmYj

另一个带有溢出功能的版本，可将页脚保持在底部并让主要内容滚动https://codepen.io/gc-nomade/pen/rXBgRV

Answer 3

把责任交给parent

让组件负责整个 space 对我来说没有额外的修补就没有成功。一个更简单的解决方案是使用 items-stretch class 作为 row，然后将 col 放入要拉伸的
这对其他人来说可能更直观。

下图以q-card为例。这应该适用于您选择的任何 child 组件，前提是您使用适当的 row / col classes.

<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 class。

Link: Quasar Docs - Flexbox - Alignment

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

Component to take all available height with Flexbox (in Quasar/Vue)

css

flexbox

vue.js

quasar-framework

把责任交给parent