... .main-navigation-and-branding { position: fixed; top: 0; right: 0; left: 0; width: 100%; } html, body, .possible-wrapper, section, iframe { height: 100%; } main { height: calc(100% - {header-height}); } main { height: calc(100% - 56px); } main { height: calc(100% - 56px); } @media screen and (min-width: 768px) { main { height: calc(100% - 80px); } } main { height: calc(100% - 56px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } @media screen and (min-width: 768px) { main { height: calc(100% - 80px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } } @media screen and (min-width: 1200px) { main { height: calc(100% - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } }