'Is there any css to height 100% despite bottom urlbar in iPhone emulator

everyone I am going to fill fullscreen my modal in my react project's mobile version. I have just added CSS h-100 and in iPhone(iphone12, iOS 15) emulator, it is cut by urlbar and scrollbar is showing. pls help me. I have tried following

App.js
const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

App.css
:root {
  --app-height: 100%;
}

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
  @media (max-width: 500px) {
      height: var(--app-height) !important;
  }
}
htmlcssiosiphone


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions