如何让 q-card 在 Quasar 中的 q-splitter 中占据全高答案

【问题标题】：How to have q-card take full height in q-splitter, in Quasar如何让 q-card 在 Quasar 中的 q-splitter 中占据全高
【发布时间】：2021-11-04 14:32:59
【问题描述】：

我们有一个基于 Vue/Quasar 的项目，在其中一个页面中想要有一个拆分器，有两个窗格，每个窗格的内容都占满高度。现在它们占据的高度最小。

    <q-splitter 
      v-model="splitterModel"
      style="height: 100%; width: 100%"
      class="no-margin full-height"
      before-class="left-pane no-margin full-height"
      after-class="right-pane no-margin full-height"
    >
    <template v-slot:before>
      <q-card class="left-pane-content no-margin full-height">
        LEFT
      </q-card>
    </template>
    <template v-slot:after>
      <q-card class="right-pane-content no-margin full-height">
        RIGHT
      </q-card>
    </template>
    </q-splitter>

.left-pane {
    background: pink;
    height: 100%;
  }
  .right-pane {
    background: pink;
    height: 100%;
  }
  .left-pane-content {
    background: #efefef;
    height: 100%;
  }
  .right-pane-content {
    background: green;
    height: 100%;
  }

q-splitter 的父级是 q-page，具有以下 CSS：

  display: block;
  background: yellow;

当前输出的示例，我们希望 'LEFT' 和 'RIGHT' q-cards 占据整个高度，最终可以单独滚动。

【问题讨论】：

标签： html css vue.js quasar-framework

【解决方案1】：

如果我们可以在height 中使用vh 并添加fit，我想试试这段代码就行了。

https://codepen.io/Pratik__007/pen/JjyvXdr

【讨论】：