Vuetify移动端竖屏模式下v-container无法占满全屏如何解决

问题根因 #

fill-height属性本质是设置height: 100%，必须依赖所有父级元素有明确的高度定义才会生效，你遇到的问题大概率是以下几个原因导致的：

1. 页面顶层的html、body、根#app元素没有设置高度，默认是自适应内容高度
2. 未使用Vuetify标准布局的v-main组件包裹主路由内容，导致主内容区域没有自动填充可用高度
3. 内层的v-layout未添加fill-height属性，无法继承外层v-container的高度
4. 移动端浏览器的地址栏/状态栏会占用视口空间，固定的100vh无法适配动态变化的可视高度

解决方案 #

步骤1：修复全局基础样式 #

在全局CSS文件中添加以下代码，确保顶层元素高度铺满视口：

html, body, #app {
  height: 100%;
  margin: 0;
  padding: 0;
}
/* 可选：适配移动端动态视口高度 */
.vh-fix {
  min-height: calc(var(--vh, 1vh) * 100);
}

如果需要适配移动端动态视口（解决地址栏展开/收起导致的高度异常），在项目入口JS文件中添加以下代码：

// 动态计算视口高度，设置CSS变量
function setVhUnit() {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}
setVhUnit();
window.addEventListener('resize', setVhUnit);
window.addEventListener('orientationchange', setVhUnit);

步骤2：修改路由入口布局 #

按照Vuetify的官方布局规范，使用v-main组件包裹主路由内容，它会自动计算并填充v-app下的可用高度：

<template>
  <v-app>
    <router-view name="navigation" :key="$route.fullPath"></router-view>
    <v-main>
      <router-view key="main"></router-view>
    </v-main>
    <router-view name="confirm"></router-view>
  </v-app>
</template>

步骤3：调整页面容器配置 #

给内层的v-layout添加fill-height属性，确保可以继承外层容器的高度，同时可添加vh-fix类适配移动端动态视口：

<template>
  <!-- 原有v-container保留fluid、fill-height，添加vh-fix类 -->
  <v-container fluid fill-height class="vh-fix">
    <!-- 给v-layout添加fill-height属性 -->
    <v-layout fill-height>
      <!-- 原有业务代码保持不变 -->
    </v-layout>
  </v-container>
</template>

注意事项 #

如果你使用的是Vuetify 3.x版本，v-layout组件已经被废弃，直接使用v-row配合fill-height属性即可替代原有v-layout的功能。

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