CSS + Vueitfy Заполните оставшуюся высоту и добавьте полосу прокрутки, если это необходимо - PullRequest
Новая
       18

CSS + Vueitfy Заполните оставшуюся высоту и добавьте полосу прокрутки, если это необходимо

1 голос
/ 22 октября 2019

Я использую Vue и Vuetify для создания мобильного сайта, который будет похож на нативное приложение Youtube, когда пользователь смотрит живое видео. Я хотел бы, чтобы компонент чата заполнял доступную высоту под видео в портретном режиме. В настоящее время используется d-flex flex-column для div, содержащего чаты, но div по-прежнему работает за пределами экрана (все приложение прокручивается). Я хотел бы избежать расчета высоты вручную при изменении размера, что мне делать?

РЕДАКТИРОВАТЬ: CodePen 

<v-app>
  <v-app-bar app fixed>
    <!-- brevity -->
  </v-app-bar>
  <v-content style="padding: 56px;">
    <player/>
    <details-bar/>
    <chats class="d-flex flex-column"/> <!-- a div that should be contained between show bar and bottom of screen -->
  </v-content>
</v-app>

picture of current app

1 Ответ

0 голосов
/ 23 октября 2019

Вы пытались установить flex на v-content и установить flex-grow на chats компонент? Например: 

<v-content style="padding: 56px;" class="d-flex flex-column">
    <player/>
    <details-bar/>
    <chats style="flex-grow: 1;"/> <!-- a div that should be contained between show bar and bottom of screen -->
  </v-content>

Теоретически это должно дать player и details-bar постоянную высоту и дать оставшееся пространство chats. Если вы можете просто ограничить высоту v-content до высоты окна, у вас все будет хорошо. Надеюсь, Vuetify делает это автоматически, но если нет, вы можете попробовать вручную установить max-height, может быть?

...