使用Nuxt和TailwindCSS如何制作全高答案

【问题标题】：Using Nuxt and TailwindCSS how to make full height使用Nuxt和TailwindCSS如何制作全高
【发布时间】：2023-01-22 21:49:39
【问题描述】：

我正在使用 nuxt 和 tailwindcss。我怎样才能使侧边栏的最小高度填满可用空间？出于某种原因，__nuxt 元素似乎破坏了一切正常工作。我该如何解决这个问题？

我的布局文件是...主视图

<template>
    <nav-bar />
    <slot />
</template>

<script setup lang="ts">
useHead({
    htmlAttrs: {
        class: "h-full bg-gray-50",
    },
    bodyAttrs: {
        class: "h-full",
    },
});
</script>

索引.vue

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


<script setup lang="ts">

definePageMeta({
  layout: "main",
});

</script>

我明白了，你可以看到红色没有延伸到填充高度。

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

h-full 和m-h-full 指的是父母的身高。您可能必须将 m-h-full 添加到所有祖先元素中，直到 <html>

specs 说：

百分比是根据高度计算的生成框的包含块。如果包含的高度块未明确指定（即，它取决于内容 height)，并且这个元素不是绝对定位的，这个值计算为自动。根元素上的百分比高度是相对的到初始包含块。

也可以考虑viewport height，有时它更合适。

【讨论】：

根据以前使用 Chrome 的经验，我认为该规则也应该上升到 html 元素
谢谢我会更新答案