Кнопка «Оформить заказ» внизу экрана прячется под панель мобильного браузера
.checkout {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
На десктопе кнопка у нижнего края видна. На телефонах, пока адресная строка браузера развёрнута, кнопка оказывается под нижней панелью браузера, и её не видно без прокрутки. Что поменять?
- Использовать height: 100dvh — высоту видимой области с учётом панелей
- Заменить 100vh на 100%, не трогая родителей
- Задать кнопке position: fixed; bottom: 0 и оставить 100vh
- Уменьшить высоту вручную: calc(100vh - 56px)