Iphone X. A block at 100% of the screen height goes beyond the "safe zone" at the bottom, while the "safe zone" at the top is indicated. How to fix?

Question

css

Hello. I will immediately announce the problem: I use an iframe in 100% of the screen. Everywhere it is displayed well, on the Iphone X it crawls out of the "safe zone" from below.
Code: 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)" - full screen iframe minus the header at the top.
There is an idea to make it through media, just increase to 120px ( calc(100% - 120px) ), but maybe there is a smarter way to fix this? I will clarify that this is in webview.

Answer 1

add to css

* {
  box-sizing: border-box;
}