Vuetify 日历高度问题答案

【问题标题】：Vuetify calendar height issuesVuetify 日历高度问题
【发布时间】：2021-08-30 17:47:50
【问题描述】：

我正在尝试防止在使用 Vuetify 的工作表和日历时出现两个滚动条。

这是我的代码：

<template>
  <v-app>
    <v-main>
      <v-container fluid class="fill-height">
        <v-row justify="center" class="fill-height">
          <v-col cols="12" class="fill-height">
            <v-sheet class="fill-height">
              <v-calendar type="week" />
            </v-sheet>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

【问题讨论】：

你能更新这个codepen 来演示这个问题吗？
Updated 日历的type 需要设置为week 或day。
在您的演示中，滚动条仅在滚动时出现，这与您始终显示的屏幕截图不太匹配。我错过了什么？
感谢您的浏览。我查看了 codepen，可以看到两个滚动条。我正在努力做到只有一个滚动条。我更新了上面的截图。
奇数。我在浏览器中看不到滚动条（macOS BigSur 上的 Chrome 91）：screenshot

标签： css vue.js vuetify.js height

【解决方案1】：

只需覆盖 Vuetify 日历组件的 CSS 即可移除多余的滚动条：

.v-calendar-daily__scroll-area {
  overflow-y: hidden !important;
}

还从 v-sheet 中删除 class="fill-height" ，它会使日历有点重叠。我不知道你为什么添加它。

在这里查看： https://codepen.io/nmdatit/pen/OJpdwox

【讨论】：

感谢您的及时回复！我希望使日历适合页面的剩余内容并仅从滚动区域滚动。
我知道。但是只为一个父容器设置它就足够了；）