如何让Vuetify 3 Nuxt 3应用适配可见视口并控制滚动行为

第一步：重置全局样式 #

先解决全局滚动条和多余像素问题，在全局CSS文件（比如assets/css/main.css）中添加：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

#__nuxt, #__layout {
  height: 100%;
}

• 重置margin和padding消除浏览器默认样式带来的多余空间
• height:100%让根元素占满整个视口高度
• overflow:hidden去掉全局滚动条，避免和主区域滚动条冲突

第二步：用Vuetify原生布局组件搭建结构 #

不用手动写height和overflow，Vuetify的v-app布局系统已做好适配。修改你的布局文件（比如layouts/default.vue）：

<template>
  <v-app>
    <!-- 顶部导航栏：加app属性自动固定在顶部 -->
    <v-app-bar app color="primary">
      <v-toolbar-title>我的应用</v-toolbar-title>
    </v-app-bar>

    <!-- 左侧抽屉：加app属性自动固定在左侧，permanent表示始终显示 -->
    <v-navigation-drawer app permanent width="250">
      <v-list>
        <v-list-item title="首页" />
        <v-list-item title="关于" />
      </v-list>
    </v-navigation-drawer>

    <!-- 主内容区：v-main会自动计算减去导航栏和抽屉后的剩余高度 -->
    <v-main>
      <div class="main-content">
        <!-- 这里放你的页面内容 -->
        <!-- 测试超出内容：复制多段文本即可看到滚动条 -->
        <p v-for="i in 50" :key="i">测试内容 {{i}}</p>
      </div>
    </v-main>
  </v-app>
</template>

<style scoped>
.main-content {
  height: 100%;
  overflow-y: auto;
  padding: 1rem; /* 可选：给内容加内边距，避免贴边 */
}
</style>

关键说明 #

• v-app-bar和v-navigation-drawer的app属性是核心：它们会被标记为应用固定布局元素，v-main自动计算剩余可用高度，不用手动写calc(100vh - 64px)这类易出错的代码
• main-content设置height:100%继承v-main高度，overflow-y:auto保证仅内容超出时显示滚动条
• 别用100vh：移动端浏览器地址栏会占用视口空间，用height:100%配合v-app布局更稳定

额外问题排查 #

如果底部仍有多余像素，检查：

• 是否有元素设置了margin-bottom（比如p标签默认margin），可给main-content加margin:0或调整内部元素样式
• v-main默认是否有padding，可通过<v-main padding="0">修改

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