Как заставить мое приложение vuetify 3 nuxt 3 использовать видимое окно просмотра

Чего именно вы хотите достичь? Страница занимает всю вертикальную область просмотра? Вы проверяли это в инструментах разработчика браузера?

Можете ли вы привести минимальный воспроизводимый пример, пожалуйста?

Отредактировал пост, надеюсь, теперь понятно. Пожалуйста, свяжитесь со мной, если есть какие-либо открытые вопросы или необходимы дополнительные разъяснения.

Я не смог добавить его, так как добавление nuxt 3 в фрагменте стека здесь немного сложнее. Что касается вашего вопроса, да, я проверил его с помощью инструментов разработчика и многое попробовал.

Я запустил ваш проект git локально на своей стороне. Так в чем же самая большая разница? Потому что я вполне могу сделать то, о чем ты просил. Верхняя панель немного меньше, но в целом я не вижу многого. В противном случае остальная часть выравнивания в основном использует флексбоксы по вертикали и горизонтали, чтобы они располагались посередине.

Я добавил его в коды и коробку, как вы предложили. Основное отличие в том, что сейчас есть 3 полосы прокрутки. Горизонтальная и вертикальная полосы для прокрутки html/body и третья полоса прокрутки на v-main, которая даже не отображается полностью, поскольку находится под панелью навигации. Также нет причин, по которым в данный момент должна быть полоса прокрутки. Я хочу, чтобы текущее приложение помещалось во всю область просмотра без полос прокрутки, вертикальная полоса прокрутки должна появляться только в том случае, если содержимое v-main слишком велико.

Также отметим, что у меня есть вариант использования на другой странице того же приложения, где прокрутка должна появляться только по горизонтальной оси, где вертикальный рост заблокирован, и контент может расти только по горизонтальной оси.

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

Нет, это приводит к тому, что на теле имеется только одна полоса прокрутки, но страница все равно слишком велика для области просмотра, и прокрутка происходит не только на v-main, если содержимое выше, чем v-main.

Вы можете лучше увидеть проблему, добавив: html, body { margin: 0; padding: 0; overflow: auto; background-color: rgb(34, 34, 143); } html { width: 99%; height: 75% !important; } body { width: 100%; height: 100%; } #__nuxt { height: 100%; width: 100%; background-color: #3f3f49; } * { border: 1px solid #a45abd; } как css.

Если вы хотите скрыть полосу прокрутки, вы можете использовать это. Что касается меня, я могу прокручивать только зеленый контейнер. Вам определенно не следует добавлять много вещей в html или body, касающихся размеров, делайте это внутри своих элементов. Я также использую ноутбук с MacOS, поэтому, возможно, я не вижу некоторых полосок, но, честно говоря, я вижу только одну в зеленом контейнере. Я не знаю, что делает v-main, но вы можете не использовать его и не сбрасывать CSS.

Спасибо за ваши усилия. Но иметь возможность прокручивать зеленый контейнер неправильно. Он содержит только очень маленькую строку. Оно вообще не должно быть больше области просмотра. Зеленая область должна заполнять все оставшееся тело без полосы прокрутки, пока в ней не будет содержимого, превышающего эту область.

Есть ли у вас такие же проблемы за пределами Vuetify?

Я переписал свой макет и изменил CSS на ваше решение, и теперь оно работает. Я не могу сказать почему. Мой макет и мой app.vue намного сложнее, чем показано в этом базовом примере. у них есть код только на стороне сервера и код только на стороне клиента, и я думаю, что его реструктуризация в дополнение к вашим изменениям CSS помогла.

@kSp рад, что это помогло! Иногда это может быть беспорядочно, если у вас накопилось много вещей, да. Не стесняйтесь попытаться воспроизвести проблему где-нибудь, чтобы сузить проблему и облегчить ее решение.