Nuxt•2mo ago

How to make a page height = the viewport height

Hi all,

<template>
  <div class="h-full" >
<NuxtLoadingIndicator/>
    <NavBar />
    <NuxtPage />
<MinFooter />
  </div>
</template>

<script setup>
import NavBar from '~/components/NavigationBar.vue'
import MinFooter from '~/components/MinFooter.vue'
</script>

</style>

<template>
  <div class="h-full" >
<NuxtLoadingIndicator/>
    <NavBar />
    <NuxtPage />
<MinFooter />
  </div>
</template>

<script setup>
import NavBar from '~/components/NavigationBar.vue'
import MinFooter from '~/components/MinFooter.vue'
</script>

</style>

I am trying to make it so that my backoffice pages are the exact height of the viewport to give it an 'app like' feel, how can that be achieved?

7 Replies

∂Max•2mo ago

Hey, you can use h-screen

isakwang•2mo ago

either h-screen or h-dvh for dynamic height which might be better for mobile

abd•2mo ago

@∂Max h-screen doesnt seem to work. parts of my page still fall below the viewport

isakwang•2mo ago

Do you have a margin or something?

abd•2mo ago

@isakwang margin where?

isakwang•2mo ago

Up top But I can send you a snippet later that works assuming that is your app.vue you need an h-screen first This fills the screen

<template>
  <div class="h-screen">
    <header class="bg-slate-800 h-16 text-center text-white">
      This is the header
    </header>
    <Placeholder class="h-full" />
  </div>
</template>

This doesn´t

<template>
  <div class="h-full">
    <header class="bg-slate-800 h-16 text-center text-white">
      This is the header
    </header>
    <Placeholder class="h-full" />
  </div>
</template>

abd•2mo ago

@isakwang I am using nuxt with layouts. this is layout/default.vue

<template>
    <Header />
    <NuxtPage />
    <Footer />
</template>

<template>
    <Header />
    <NuxtPage />
    <Footer />
</template>

How do i manage it if i have the header and footer separated from the page comopnent that is rendering the page itself

Gaming

Programming

How to make a page height = the viewport height