Quasar双列布局实现粘性区域与独立滚动条问题求助

核心修改点 #

• 给<q-page>添加h-full类，使其自动占满布局中除粘性顶部栏外的所有垂直可用空间
• 删除两个列上硬编码的height:400px属性，flex布局下子元素会默认拉伸至与父元素等高
• 右侧侧边栏移除col-4栅格类，避免与设定的200px固定宽度冲突，左侧保留col类即可实现自适应填充剩余宽度

修改后完整代码 #

<template>
  <q-page class="flex h-full" style="background: grey">
    <div
      class="col q-pa-md scroll"
      style="background: rgba(240, 150, 50, 0.75);"
    >
      {{ dummyText }}
    </div>
    <div
      class="q-pa-md scroll"
      style="
        background: rgba(130, 140, 180, 0.75);
        min-width: 200px;
        max-width: 200px;
      "
    >
      {{ dummyText }}
    </div>
  </q-page>
</template>

修改后即可实现：顶部粘性栏保持固定，左右两列各自独立滚动，容器自动占满剩余垂直空间，右侧侧边栏固定200px宽度、左侧自适应填充剩余可用空间的需求。

内容的提问来源于stack exchange，提问作者JokerMartini