Как сделать плавающий div отзывчивым

Question

У меня есть страница регистрации, закодированная в плавающем div. Однако он не загружается отлично реагирующим образом. Я хочу сделать фиксированную высоту, чтобы гарантировать, что при просмотре пользователем в разных устройствах будет исправлен цвет фона #ebebeb. К сожалению, это не отличается, когда я пытался изменить% высоты.

https://jsfiddle.net/Snurainiyakob/V4u5X/892/

CSS

.modaloverlay .regmodal { 
    background-color: #ebebeb; 
    height: 100%; 
    position: relative; 
    margin: 0 auto; 
    -webkit-overflow-scrolling: touch; 
} 

@media (min-width: 60em) { 
    .modaloverlay .regmodal { 
    height: 87%; 
    margin: 5% auto; 
    max-height: 57em; 
    max-width: 66em; 
    width: 29%; 
    } 
} 

.modaloverlay .regmodal > iframe, .modaloverlay .regmodal > div { 
    border: none; 
    height: 100%; 
} 

Answer 1

Вы можете установить overflow:hidden в обертку все элементы внутри

CSS

.modaloverlay .regmodal { 
    background-color: #ebebeb; 
    height: 100%; 
    position: relative; 
    margin: 0 auto; 
    -webkit-overflow-scrolling: touch; 
    overflow: hidden; 
} 

Answer 2

Это длинный выстрел, не зная, макет, но вы смотрели в использовании высоты видового экрана? Высота элемента автоматически пропорциональна видовом устройства пользователь находится на:

.element { 
    height: 75vh; 
} 

Приведенный выше будет гарантировать, что, по существу .element является то, что высота окна просмотра устройства составляет 75%. Аналогичным образом вы также можете использовать vw, чтобы добиться того же значения для ширины видового экрана.