Iphone X. Блок в 100% высоты экрана выезжает за «безопасную зону» снизу, при этом, «безопасная зона» вверху указана. Как исправить?

Question

[mosikus]

Здравствуйте. Сразу объявлю проблему: использую iframe в 100% экрана. Везде отображается хорошо, на Iphone X вылезает за пределы "безопасной зоны" снизу.
Код: https://jsfiddle.net/fLmzh01o/5/

<div class="Header"></div>

<iframe title="iframe" class="MapsCssIOS" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d728673.4194246547!2d39.16776838500522!3d44.48686878262547!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40f12b610c1289b1%3A0x102a3a583f19420!2z0KDQtdGB0L_Rg9Cx0LvQuNC60LAg0JDQtNGL0LPQtdGP!5e0!3m2!1sru!2sru!4v1572722106220!5m2!1sru!2sru" frameBorder="0" scrolling="no" marginHeight="0" marginWidth="0"></iframe>

.Header {  position: fixed;
           top: 0;   
           background: grey;
           width: 100%;
           height: 44px;
           right: 0;}

.MapsCssIOS {
 position: fixed; 
 height: calc(100% - 44px); 
 width: 100%; 
 top: 44px;
 padding-top: env(safe-area-inset-top);
 right: 0;
}

"height: calc(100% - 44px)" - iframe на весь экран с вычетом шапки вверху.
Есть идея сделать через media, просто увеличивать до 120px ( calc(100% - 120px) ), но, может найдется более разумный способ исправить это ? Уточню, что это в вебвью.

Answer 1

[akyl-kb]

Добавить в css

* {
  box-sizing: border-box;
}

Comments

[mosikus]

А что это даст ?

[mosikus]

akyl-kb, я не совсем понял что оно сделало, но это действительно помогло, спасибо !

[mosikus]

akyl-kb, только все-таки, если мне нужно поднять выше "безопасной зоны", как это сделать ? Только медиа-запросами ?

[akyl-kb]

durak22212, здесь можно узнать подробнее как работает htmlbook.ru/css/box-sizing
Во многих css фреймворках используется box-sizing: border-box, так как является более логичным поведением чем content-box

[akyl-kb]

https://jsfiddle.net/oyrfvcsm/
зачем нужен padding-top?

[mosikus]

akyl-kb, https://css-live.ru/articles/ponimanie-vyuporta-we...

[mosikus]

В хеадере тоже должен быть, забыл написать.

[akyl-kb]

durak22212, этот padding-top должен быть для .header, если на карту поставить кнопки навигации вниз упадут

[mosikus]

То есть, вы предлагаете поменять padding-top на padding-bottom для карты ? Так карта за хеадер уйдет

[akyl-kb]

durak22212, я думаю для этого iframe не нужен никакой padding, а так хз у меня нет iphone x не могу проверить, у меня и так норм отображается