Блог

Главная - Вопросы по программированию - как позволить двум картам внизу заполнить всю высоту экрана (каркас Квазара)

как позволить двум картам внизу заполнить всю высоту экрана (каркас Квазара)

#html #vue.js #quasar

Вопрос:

Я использовал фреймворк Квазара, чтобы создать структуру, подобную фотографии ниже. Мой вопрос в том, как позволить двум картам в нижней части заполнить всю высоту экрана, кроме верхней. Я перепробовал много методов, но они не сработали. Кто может сказать мне, как это сделать. Спасибо.

 <q-page>
<!-- card on top -->
<q-card
  class="q-mx-xs q-mt-xs"
  style="border-radius: 8px;"
>
 </q-card>
<div class="windowsheight q-mx-none q-mt-xs row item-start q-gutter-none content-around">
  <!-- card on left bottom with full height -->
  <div class="windowsheight col-12 col-md-4">
    <q-card class="full-height q-ma-xs q-gutter-xs">
    </q-card>
  </div>
  <!-- card on right bottom with full height -->
  <div class="windowsheight col-12 col-md-8">
    <q-card class="full-height q-ma-xs q-gutter-xs">
    </q-card>
  </div>
</div>

структуру смотрите здесь:

введите описание изображения здесь

Комментарии:

1. Не могли бы вы показать пример того, как это должно выглядеть? Или приведенная выше графика выглядит так, как вы хотите, чтобы она выглядела?

2. Да, я хочу, чтобы мое приложение выглядело как моя графика. Я могу его нарисовать. Мой вопрос в том, как позволить двум картам внизу заполнить всю высоту экрана, кроме верхней. Я перепробовал много методов, но они не сработали. Две карты внизу не могут покрыть всю высоту. Я перепробовал много методов, но они не сработали.

3. Что вы пробовали? Как это выглядит сейчас? Пожалуйста, отредактируйте свой вопрос.

4. Я использовал код выше, затем высота двух карточек внизу просто соответствует их содержимому. Так что я могу видеть пробел в нижней части экрана. Мне просто нужна высота двух карт внизу= экран окна — высота карты вверху.

5. У меня была проблема, похожая на вашу, и я, наконец, решил ее с помощью функций вычисления CSS. Вы можете попробовать calc(100vh - topHeight)

Метки: