Как задать высоту блоку при vh, чтобы съедалась панель вкладок сверху браузера на телефоне?

Question

[Vladislav]

Как задать высоту блоку при vh, чтобы не съедалась панель вкладок сверху браузера на телефоне?

Answer 1

[Michael]

if (window.matchMedia("(max-width: 576px)").matches) {
const panel = document.querySelector(".top-panel");
const main = document.querySelector(".main-block");

const allPageHeight = document.documentElement.clientHeight; //получаем высоту всего видимого экрана

main.style.minHeight = `${allPageHeight - panel.clientHeight}px`; //вычитаем высоту верхней панели от всего экрана
}

Comments

[Vladislav]

Michael top-panel класс кому добавить? и main-block класс кому?

[Michael]

Vladislav, top-panel к верхней панелке про который ишла речь в вопросе, main-block - это уже блок контекнта который идет после верхней панели.

но это немного замудренный способ, можно просто выставить высоту верхнему блоку, например 100px, и установить следюющему блоку в css height: calc(100vh - 100px)

[Vladislav]

Леонид Яковлев, да я про это

[theuser]

А на айпадном сафари размер вьюпорта не меняется при включении панели закладок в настройках)

[Michael]

yarovikov, ерунду написал?))