Основные проблемы с версткой. Я изо всех сил стараюсь не допустить, чтобы 3 гибких элемента не превышали высоту экрана - PullRequest
0 голосов
/ 12 сентября 2018

У меня возникли проблемы с использованием сетки макета vuetify.

У меня есть 3 элемента v-flex в v-макете внутри моего компонента.Одна панель инструментов (вверху), одна для контента (в центре), а другая панель действий (внизу)

Мне нужен контент (средний) v-flex, чтобы не сдвигать нижнюю часть экрана, когдасодержимое внутри него расширяется до любой высоты, оно должно оставаться такого же размера, как если бы внутри него не было содержимого.т.е. 10 из 12 рядов.Все 3 должны остаться на месте.

Макет из app.vue равен

<v-content app :dir="appDirection">
  <v-container fluid fill-height>
    <v-layout column >
      <v-flex xs12>
        <router-view/>
      </v-flex>
     </v-layout>
  </v-container>
</v-content>

В представлении маршрутизатора у меня есть страница с

<v-layout>
  <v-navigation-drawer></v-navigation-drawer>
  <my-component></my-component> 
</v-layout>

в моем компоненте:

<v-layout column>
  <v-flex xs1 sm1 md1 lg1> //TOOLBAR(top)
      <v-toolbar></v-toolbar>
  </v-flex>

  <v-flex xs10 sm10 md10 lg10 > //CONTENT(middle)
      <ul>
          <v-infinite-scroll> should inherit dimensions and scroll
          </v-infinite-scroll>
      </ul>
  </v-flex>
  <v-flex xs1 sm1 md1 lg1>//ACTIONBAR(bottom)
      <v-text-field></v-text-field>
  </v-flex>
</v-layout>

Если кто-нибудь знает, как этого добиться, ваша помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 13 сентября 2018

Вы должны сначала понять, как v-flex внутри v-layout работает с пропеллером column работает.

Когда установлена ​​колонка. v-flex берет доступную высоту (а не высоту экрана / высоту содержимого) и делит ее на сетку с 12 точками.

Все, что вам нужно сделать, это указать высоту контейнера (здесь v-layout). Это решит вашу проблему.

Надеюсь, это поможет.

...