Как обращаться с 100vh в флаттер?

Question

У меня есть страница, которую я пытаюсь отобразить через WebView во Flutter.

Страница имеет высоту 100 vh (в CSS), и при попытке отобразить эту страницу в моем приложении панель приложения закрывает верхнюю часть страницы. Я полагаю, что это связано с тем, что на странице 100vh.

Мне было интересно, знает ли кто-нибудь, как справиться с таким случаем и заставить страницу отображаться на меньшей высоте, чтобы панель приложения не закрывала верхнюю часть страницы.

РЕДАКТИРОВАТЬ: Для ясности, это чужая веб-страница, я не могу редактировать их css.

Спасибо.

Answer 1

Вы можете использовать метод cal c (). Если вы знаете высоту панели приложения, вы можете установить высоту следующим образом:

Предположим, что высота панели приложения пока составляет 65 пикселей. Затем вы должны использовать следующую строку css:

.appbody{
    height: calc(100vh - 65px);
    margin-top: 65px; /* Clear the space for the app bar above */
}

Я бы порекомендовал использовать свойство min-height, если это возможно. Когда экран вашего приложения становится больше, размер может увеличиваться с длиной содержимого:

.appbody{
    min-height: calc(100vh - 65px);
    margin-top: 65px; /* Clear the space for the app bar above */
}

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