描述：
在进行quasar前端开发过程中，由于侧边栏没有设置overlay属性，而是固定在左侧。当page中页面内容很长时，滚动下滑会让左侧侧边栏一起下滑。
左侧边栏菜单
解决方案：
了解到可以用q-scroll-area组件。
<template>
<q-page padding>
<q-scroll-area class="fit" >
</q-scroll-area>
</q-page>
</template>
但问题又出现了，让q-scroll-area充满q-page的width、height，height: 100%却无法生效。
看到q-page对应的main标签中，赋予了min-height: calc(100vh - 50px);样式，因此想到让q-scroll-area也赋予该样式。
最后：实现了侧边栏单独滑动，内容页单独滑动
<template>
<q-page padding>
<q-scroll-area style="height: calc(100vh - 50px)" >
</q-scroll-area>
</q-page>
</template>
// 其中50px是header的高度
单独滑动效果
如果要将其封装成组件
<template>
<q-scroll-area class="proj-con" :class="scroll_class" >
<div class="layout-padding" :class="content_class">
<slot></slot>
</div>
</q-scroll-area>
</template>
<style lang="stylus">
.proj-con
height calc(100vh - 50px)
</style>
<script>
export default {
data () {
return {
}
},
props: {
content_class: String,
scroll_class: String
}
}
</script>
// 其他页面使用，引入组件，使用
<q-page>
<proj-base-scroll content_class="p-max-w">
<p>111</p>
</proj-base-scroll>
</q-page>
</template>
