Как сделать, чтобы модальное было по центру экрана?

Question

[Anna Kolchina]

Проблема в том, что при уменьшение экрана по высоте, модальное окно вылезает за окно браузера. Если, задать высоту, например, 85%, тогда выпадает контент из модального окна. Как сделать так, чтобы модальное окно одинакового хорошо отображалось по высоте?

Стандартная высота браузера:

Уменьшенная высота браузера:


Html:

<div class="wrapper-form">
            <div class="form-content">
                <h3>Hire <span class="colororange">us</span></h3>
                <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa<br> qui officia deserunt mollit anim id est laborum</p>
                <form action="#" class="form-hireus">
                    <input type="email" class="email-hireus" placeholder="Your Email">
                    <input type="text" class="subject-hireus" placeholder="Subject">
                    <textarea class="textarea-hireus" placeholder="Your Message"></textarea>
                    <input type="submit" class="button button-modal" value="Send Message">
                </form>
                <a href="#" class="btn-close-modal">
                    <img src="assets/img/btn/btn-close-modal.png" alt="close-modal">
                </a>
            </div>
        </div>

CSS:

.wrapper-form {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-color: rgba(59, 67, 76, 0.5);
}
.wrapper-form .form-content {
  padding: 60px 105px;
}
.wrapper-form h3 {
  padding: 0;
  margin: 0;
  color: #424242;
  font-weight: 600;
  font-size: 2.188em;
  margin-bottom: 29px;
  text-transform: uppercase;
}
.wrapper-form p {
  color: #424242;
  line-height: 30px;
  font-size: 1em;
  margin-bottom: 46px;
}
.form-content {
  width: 85%;
  max-width: 763px;
  height: auto;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  z-index: 2;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.form-content::after {
  display: table;
  clear: both;
  content: '';
}
.email-hireus,
.subject-hireus {
  width: 100%;
  height: 50px;
  display: block;
  border-radius: 10px;
  padding-left: 23px;
  margin-bottom: 29px;
  border: 1px solid rgba(59, 67, 76, 0.3);
}
.btn-close-modal {
  top: -19px;
  right: -19px;
  position: absolute;
}
.textarea-hireus {
  width: 100%;
  height: 231px;
  resize: none;
  display: block;
  border-radius: 10px;
  padding: 20px 23px;
  margin-bottom: 30px;
  border: 1px solid rgba(59, 67, 76, 0.3);
}
.button-modal {
  width: 100%;
  border: none;
  background-color: #f7600e;
}

Answer 1

[Anna Kolchina]

Проблема решена:

.wrapper-form {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow-y: auto;
  display: none;
  background-color: rgba(59, 67, 76, 0.5);
}

.form-content {
  width: 85%;
  max-width: 763px;
  height: auto;
  background-color: #fff;
  position: absolute;
  text-align: center;
  z-index: 2;
  left: 50%;
  margin: 10% auto; 
  transform: translateX(-50%);
}

Answer 2

[iBird Rose]

а как именно ты хочешь, чтобы оно отображалось, когда контент не влезает в экран?
1) скролл на самом окне браузера - для этого делаешь overflow: hidden для body при открытии модалки и делаешь скролл на обертке модалки
2) скролл на самой модалке - тут уже просто ограничиваешь высоту модалки и даешь ей overflow-y: auto;

Comments

[Anna Kolchina]

Модальное окно прокручивается, но верхняя часть всё равно выходит за пределы окна браузера.

[iBird Rose]

Anna Kolchina, судя по скринам у тебя прокручивается весь сайт, но модальное окно стоит на месте. а должно прокручиваться именно модальное окно

[Anna Kolchina]

iBird Rose, Получилось, а как теперь иконку привести в нормальное состояние, которая закрывает окно?

[iBird Rose]

Anna Kolchina, ну за грани блока ее ты уже не вытащишь. тут уже только первый способ, который я описал в ответе - скролл делать не на модалку, а на все окно задавая overflow: hidden для body

[Anna Kolchina]

iBird Rose, Тогда верхушка модального окна улетает куда-то вверх.
А если задать ему фиксированную высоту, например 80vh, то контент выпадает.

[Anna Kolchina]

iBird Rose,

[iBird Rose]

Anna Kolchina, не задавайте высотку модалке. отрегулируйте ее верхнее положение. через top или margin-top к примеру

[Anna Kolchina]

iBird Rose, Спасибо за советы. Проблема решена, путём добавления margin: 10% 0;, вместо top: 50%; Таким образом контент имеет одинаковый отступ как снизу так и сверху.

Answer 3

[Максим]

можно flexbox применить : justify-content:center; align-items:center;
так же с absolute : left:50%; right:50%; transform:translate(-50%,-50%);

Comments

[Anna Kolchina]

Абсолютное позиционирование есть:
.form-content {
width: 85%;
max-width: 763px;
height: auto;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
text-align: center;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

[Максим]

Anna Kolchina, размер уменьшите до 80vw или ещё меньше а в высоту до 80vh

[Anna Kolchina]

Максим Ленский, Если задать высоту, контент выпадает из модального окна.

[Максим]

Anna Kolchina, уменьшать padding и margin и так же размер шрифтов и прочего ... это реально сделать , ux именно тем и сложен тем что надо уместить удобно на одном экране

кстати модалка кликабельна : https://codepen.io/topicstarter/pen/ELEPRW?editors=1100

[Gortyser]

Anna Kolchina, overflow-y: auto и ограниченная высота (типа max-height: 90vh, как пример), и будет выглядеть нормально.