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

Question

[Влад Крахмалёв]

Делаю большой попап с калькулятором на сайте, на десктопе выглядит всё нормально, но проблема с мобильным: когда высота попапа становиться больше высоты экрана, то часть попапа просто обрезается и не скролиться, так как 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%);
}

Comments

[FeST1VaL]

overflow-y: scroll не помогает?

[Влад Крахмалёв]

Артем Будин, Помогло, спасибо))

Answer 1

[Антон Литвиненко]

Посмотрите как сделано в бутстрапе, это хорошее решение.
В двух словах - у вас не отдельно оверлей и отдельно попап, у вас оверлей, у которого фиксед 0 0 100% 100% и overflow-y: auto, а в нем само окошко, которое имеет например max-width 600px и margin: 10% auto 15px;
Если переполнение контентом, то скролл появляется у оверлея.
Второй вариант сделать внутри вашей модалки overflow-y: auto, тогда скролл будет появляться внутри модалки

Comments

[Влад Крахмалёв]

Да, действительно, немного переделал структуру как в бустрап и всё сработало. Спасибо огромное))

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

.popup-calc {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    position: fixed;
    z-index: 100;
    overflow-y: auto;
}
.popup-calc .container {
  position: relative;
  max-width: 1200px;
  margin: 5% auto 0;
}