Positional relationship between footer and navigation

Question

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.

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

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

Please tell me what to do specifically. What information should be provided? — shinya, Aug 17 '23 at 04:32

Moritz Ringler · Accepted Answer · 2023-08-18T11:11:36.523

1

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

edited Aug 18 '23 at 11:11

answered Aug 17 '23 at 06:33

Moritz Ringler

9,772
9
21
34

thank you for your kindness. Thanks to you, I was able to solve most of the problems. I just found one problem. If the height is 600px like
content
, the top of the navigation will be hidden. – shinya Aug 18 '23 at 03:19
I wanted to share the URL in the comments section, but there was a character limit, so I added it to the question text. – shinya Aug 18 '23 at 03:33
As for the additional question, as far as I tried it myself, the problem can be solved once by setting I was. – shinya Aug 18 '23 at 08:11
@shinya Oh, good point, thank you for finding that! Setting `min-height:100vh` on the content works, but I think it gives you a scrollbar even if content is short enough to show header and footer on the same page. Using `flex-0-1-100` on the container and `max-height` instead of `height` on the navigation fixes the issue, have a look at the updated answer – Moritz Ringler Aug 18 '23 at 11:14
Thank you for teaching me carefully. Thanks to you, the problem was completely resolved. – shinya Aug 19 '23 at 01:58
I told you that it was perfectly resolved, but in fact, I found another point that needs to be improved. Since this is a new question, I would appreciate it if you could confirm it if possible. https://stackoverflow.com/questions/76942555/top-navigation-is-hidden – shinya Aug 21 '23 at 09:26
Yes, that is a different behavior than the one described in this question (the navigation in the example link from this question scrolls too). Don't know if it can be done in CSS – Moritz Ringler Aug 21 '23 at 11:30
Thank you for your reply. I'm not a native English speaker and may not be able to communicate well, but the way I want to achieve this is https://pro-bravia.sony.net/ja/guides/ I want to prevent the left navigation from shifting even when scrolling to the bottom of the page like this site – shinya Aug 22 '23 at 01:55
Oh, your explanations are great, I just don't know what to do without looking at something. It's all monkey see monkey do with me, so the link is very helpful. The difference there is that the nav does not take up the whole height. Just change the `max-height: calc...` on the navbar to something like `height: fit-content`. I'll add an answer to the other question. – Moritz Ringler Aug 22 '23 at 08:24

Positional relationship between footer and navigation

1 Answers1

Linked