Using Nuxt and TailwindCSS how to make full height-CodePudding

I'm using nuxt and tailwindcss. How can I make it so my sidebar's min-height fills the available space? for some reason the __nuxt element appears to be breaking everything from working. How do i work around this?

My layout file is... 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 >
        <div v-for="index in 10" v-bind:key="index">
            here
        </div>
    </div>
</template>


<script setup lang="ts">

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

</script>

I get this which you can see the red does not extend to fill the height.

CodePudding user response：

h-full and m-h-full refer to the height of the parent. you probably have to add m-h-full to all ancestor elements up to <html>

The specs say:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.

also consider viewport height, sometimes it is a better fit.

CodePudding user response：

As you already said in your question, you'd have to apply the classes to every parent element, including the wrapper div for the Nuxt app. I don't know if there is something like a hook to access this element, but what I'd do in your situation is simply adding this to my CSS somewhere:

.__nuxt {
  @apply h-full;
}

In case you didn't know, the @apply directive is tailwind's way of using their classes inside CSS.