Как использовать высоту: -webkit-fill-available в браузере Edge? Как заставить div заполнить доступное пространство в Ed ⇐ Html

[Anonymous]

Я использую начальную загрузку для предварительного просмотра мобильного устройства следующим образом:




В Chrome это прекрасно работает. Но не на грани:(

Мой HTML/CSS-код выглядит следующим образом:

Код: Выделить всё

.frame {
border-radius: 15px;
background-color: #b3b6b9;
height: 400px;
padding: 50px 10px 75px 10px;
}

.screen {
border-radius: 10px;
background-color: #ffffff;
height: -webkit-fill-available;
padding: 20px 15px 150px 15px;

}
.circle {
border: 1px solid;
border-color: #ffffff;
border-radius: 50px;
height: 50px;
width: 50px;
margin: 10px auto;
position: relative;
}
.preview {
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 25px;
-webkit-border-bottom-left-radius: 0px;

-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 25px;
-moz-border-radius-bottomleft: 0px;

border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 0px;
background-color: #dee0e2;
height: -webkit-fill-available;
}

Код: Выделить всё

Preview





 

Но макет в Edge работает некорректно. Полагаю, что-то связано с высотой оператора CSS: -webkit-fill-available;

Для справки ниже показан макет мобильного устройства в Edge.



Обратите внимание, что элемент div предварительного просмотра также не отображается в Edge:

Подробнее здесь: https://stackoverflow.com/questions/541 ... -a-div-fil