使用Nuxt和TailwindCSS如何制作全高

Question

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

我的布局文件是... main.vue

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

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

index.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>

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

Answer 1

正如您在问题中已经说过的，您必须将这些类应用于每个父元素，包括 Nuxt 应用程序的包装器

div

。我不知道是否有类似钩子的东西来访问这个元素，但在你的情况下我要做的就是简单地将其添加到我的 CSS 某处：

#__nuxt {
  @apply h-full;
}

如果您不知道，

@apply

指令是 tailwind 在 CSS 中使用其类的方式。

编辑：包装元素有一个 ID，而不是一个类。

Answer 2

h-full

和

m-h-full

指的是父母的身高。您可能必须将

m-h-full

添加到

<html>

之前的所有祖先元素

规格说：

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

还要考虑视口高度，有时它更合适。

Answer 3

问题来自于 DOM 中 id 为“_nuxt”的 div。遗憾的是，你不能（据我所知，从你的 app.vue （或 main.vue）添加一个类。

您可以按照 muell 的建议强制顺风应用，但（个人）我更喜欢另一种方式。在你的 nuxt.config 中：

export default defineNuxtConfig({
  ....,
  app: {
    rootAttrs: {
    class: "h-full"
    },   
  }
});

https://github.com/nuxt/nuxt/discussions/24447

使用Nuxt和TailwindCSS如何制作全高

问题描述投票：0回答：3

3个回答

最新问题

使用Nuxt和TailwindCSS如何制作全高

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3