Nuxt+TailwindCSS：解决元素无法占满可用高度及__nuxt布局问题

问题根源 #

Nuxt自动生成的根元素__nuxt默认高度为auto，即便给html和body设置了h-full，高度也无法传递到内部布局和页面容器；另外你代码里的m-h-full是笔误，正确的Tailwind类应为min-h-full。

具体修复步骤 #

1. 给__nuxt元素添加高度样式

在项目全局样式文件（如assets/css/main.css）中添加：

#__nuxt {
  height: 100%;
}

若没有全局样式文件，也可在布局文件中通过useHead注入样式：

useHead({
  style: [
    {
      children: `#__nuxt { height: 100%; }`
    }
  ],
  htmlAttrs: {
    class: "h-full bg-gray-50",
  },
  bodyAttrs: {
    class: "h-full",
  },
});

2. 修改布局文件main.vue

给布局根节点添加垂直弹性布局容器，让导航栏和页面内容区垂直分布，内容区自动占满剩余空间：

<template>
  <div class="flex flex-col h-full">
    <nav-bar />
    <div class="flex-1">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
useHead({
  style: [
    {
      children: `#__nuxt { height: 100%; }`
    }
  ],
  htmlAttrs: {
    class: "h-full bg-gray-50",
  },
  bodyAttrs: {
    class: "h-full",
  },
});
</script>

3. 修正页面文件index.vue的类名

把错误的m-h-full改为min-h-full，确保容器占满父元素高度：

<template>
  <div class="bg-red-100 min-h-full">
    <div v-for="index in 10" :key="index">
      here
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: "main",
});
</script>

原理说明 #

• #__nuxt { height: 100%; } 让Nuxt根元素继承html/body的100%高度
• 布局中的flex flex-col h-full创建垂直弹性布局，flex-1让页面内容区自动填充导航栏下方的剩余空间
• 页面容器的min-h-full确保内容不足时依然占满可用高度，内容超出时自动延伸

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