@vladkrakhmalev
Front-end разработчик

Как сделать popap, выходящий за пределы экрана?

Делаю большой попап с калькулятором на сайте, на десктопе выглядит всё нормально, но проблема с мобильным: когда высота попапа становиться больше высоты экрана, то часть попапа просто обрезается и не скролиться, так как position: fixed. Как сделать, чтобы можно было скролить popup в пределах его высоты?

Заранее всем спасибо.

<div class="popup-calc">
      <div class="container">
            <form action="" class="content">
                  <!-- Контент -->
             </form>
      </div>
</div>

.popup-calc {
    width:100%;
    background-color: rgba(0,0,0,0.7);
    position:fixed;
    z-index: 100;
}
.popup-calc .container {
  position: relative;
  height: 100vh;
}
.popup-calc .content {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}
  • Вопрос задан
  • 34 просмотра
Решения вопроса 1
AntonLitvinenko
@AntonLitvinenko
HTML coder
Посмотрите как сделано в бутстрапе, это хорошее решение.
В двух словах - у вас не отдельно оверлей и отдельно попап, у вас оверлей, у которого фиксед 0 0 100% 100% и overflow-y: auto, а в нем само окошко, которое имеет например max-width 600px и margin: 10% auto 15px;
Если переполнение контентом, то скролл появляется у оверлея.
Второй вариант сделать внутри вашей модалки overflow-y: auto, тогда скролл будет появляться внутри модалки
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы