如何让我的 vuetify 3 nuxt 3 应用程序使用可见视口

Question

我的问题是控制我的 Vuetify 3 Nuxt 3 应用程序滚动行为。我想要实现的目标如下：

我实际拥有的是以下内容：

我希望应用程序填充整个视口，我希望应用程序顶部有一个导航栏，左侧有一个导航抽屉。除非主区域的内容高于区域高度，否则不应有滚动条。现在有 3 个滚动条，尽管整个内容应该适合视图端口。

我尝试了很多东西，比如将html和body设置为

width:100vw;height:100vh;

，设置其他嵌套节点的高度和溢出，但到目前为止我无法让html和body只占用可见视口，总是有一个正如您在我的屏幕截图中看到的那样，底部多了几个像素。我可以使用

overflow: hidden

隐藏溢出，但稍后我无法在溢出时滚动主要区域。也许有一个明显的解决方案，但我是 css 的初学者......

Answer 1

我不确定 Vuetify 的行为，但删除它效果很好

html, body {
  /* height: 100vh; */
  /* width: 100vw; */
  margin: 0;
  padding: 0;
  overflow: auto;
  background-color: rgb(34, 34, 143);
}

* {
  /* border: 1px solid #a45abd; */
}

使用这些单位是相当危险的，让页面流动。