Search code examples
javascriptvue.jsvuejs3vuetify.js

Positional relationship between footer and navigation

https://docus.dev/api/composables I want to create a layout like this site using vuetify, but when the footer and navigation-drawer settings do not work and the footer is not completely visible As shown below, the height of the navigation is not enough and the border is cut off. enter image description here

When I scrolled to the bottom of the page it was set to the correct height.

enter image description here

The current code is below

<template>
  <v-app>
    <Header />
    <v-footer border="t" absolute app>
      <v-row justify="center" no-gutters>
        <AppThemeToggle />
        <v-col class="primary lighten-2 py-4 text-center white--text" cols="12">
          <strong
            >Copyright {{ new Date().getFullYear() }} vuetify
            Corporation</strong
          >
        </v-col>
      </v-row>
    </v-footer>
    <v-navigation-drawer permanent width="300">
      <v-row justify="center">
        <v-expansion-panels :modelValue="panel" :multiple="true">
          <v-expansion-panel
            v-for="(item, i) in matchedNavObject.children"
            :key="i"
          >
            <v-expansion-panel-title>{{ item.title }}</v-expansion-panel-title>

            <v-expansion-panel-text
              v-for="(navItem, j) in item.children"
              :key="j"
            >
              <nuxt-link
                :to="`${baseUrl}${navItem._path}`"
                class="text-decoration-none"
                :class="{
                  active: `${navItem._path}` === route.path,
                }"
                >{{ navItem.title }}</nuxt-link
              >
            </v-expansion-panel-text>
          </v-expansion-panel>
        </v-expansion-panels>
      </v-row>
    </v-navigation-drawer>
    <v-main>
      <v-container>
        <slot />
        <NavigationLink />
      </v-container>
    </v-main>
  </v-app>
</template>
<style lang="scss">
.test {
}
</style>

I would like to know if there is a way to solve this problem.

Share the current problem you want to solve at the following URL

playground

Solution

  • Thank you for including the link, now I understand what you want. Looking at the layout there, you can see that it consists of three blocks: the header, the main area, and the footer. The main area consists of two column blocks: navigation and content:

    -----------------
|    header     |
-----------------
||---||--------||
|| n ||   c    ||
|| a ||   o    ||
|| v ||   n    ||
||   ||   t    ||
||---||   e    ||
|     |   n    ||
|     |   t    ||
|     |--------||
-----------------
|   footer      |
-----------------

    The trick is to make the navigation sticky, so that it does not scroll with the content, and since it should occupy all space from the end of the header to the bottom, you have to set its height accordingly.

    You can build this in Vuetify pretty much the same:

    <v-app>
  <v-app-bar>...</v-app-bar>
  <div class="d-flex flex-0-1-100">

    <v-navigation-drawer
      class="position-sticky"
      style="max-height: calc(100vh - 64px)"
    >...</v-navigation-drawer>

    <v-main class="pl-0">...</v-main>

  </div>
  <v-footer>...</v-footer>
</v-app>

    The d-flex flex-0-1-100 on the the main area container puts nav and content next to each other and allows it to shrink from an initial size of 100%. Also, the sticky navigation gets a maximum height of window height minus header height. Using max-height allows it to shrink if content is short enough to show header and footer at the same time, while the flex-0-1-100 will make the main area span the whole height between them..

    playground

    In the above example, when height of the navigation is calculated, the height of the header is assumed to be fixed at 64px (height: calc(100vh - 64px)). Instead, you can also use the useLayout composable to get the actual height, see this playground