Vuetify 2.2, Почему мой нижний колонтитул не выровнен по абсолютному основанию на Code Pen? - PullRequest
Новая
       23

Vuetify 2.2, Почему мой нижний колонтитул не выровнен по абсолютному основанию на Code Pen?

0 голосов
/ 29 февраля 2020

У меня есть кодовое перо внутри этого кодового пера. Я имею vuetify 2.2.15.

Я использовал нижний колонтитул следующим образом: 

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-card>
          <v-card-text>
            Expected to align at bottom
          </v-card-text>
        </v-card>
      </v-container>
    <v-content>
    <v-footer>
      <v-col
        class="text-center"
      >
      footer
      </v-col>
    </v-footer>
  </v-app>
</div>

В Реальный код работает в сети, этот нижний колонтитул выровнен по абсолютному основанию. Но в кодовой ручке нижний колонтитул НЕ выровнен по абсолютному основанию, а только относительно предыдущего компонента относительно.

enter image description here

Есть какой-нибудь недостающий стек, который я должен был использовать? Спасибо за ваше предложение.

1 Ответ

1 голос
/ 29 февраля 2020

вы должны использовать absolute в вашем v-footer, например: 

<v-footer absolute>
    <v-col class="text-center">
      footer
    </v-col>
</v-footer>

абсолютная поддержка применяется position: absolute к компоненту.

также вы должны двигаться </v-content> после нижний колонтитул

Ваш окончательный код должен выглядеть следующим образом: 

<div id="app">
  <v-app>
    <v-content>
      <v-navigation-drawer app></v-navigation-drawer>
      <v-container>
        <v-card
        >
          <v-card-text
          >
            Expected to align at bottom
          </v-card-text>
        </v-card>
      </v-container>
    <v-footer absolute>
      <v-col
        class="text-center"
      >
      footer
      </v-col>
    </v-footer>
      </v-content>
  </v-app>
</div>
...