100vh problem with iOS Safari
The web content it’s outside the viewport although we used 100vh (the red opacity box with 100vh text).
.section {
height: 100vh; // bad approach
}The problem you have been receiving after adding the height: 100vh to mobile resolutions. It happens due to the calculation method which Safari and Chrome are using. Mobile devices calc browser viewport as (top bar + document + bottom bar) = 100vh. I had a hard time with 100vh when the page have to have a section filled the whole screen. After a couple of hours, I’ve found the solutions that I show you.
They are two solutions, the first needs JavaScript and CSS, the second solution required only CSS.
1. JS & CSS solution
Let’s get started first with the JS file:
const appHeight = () => {
const doc = document.documentElement
doc.style.setProperty(‘ — app-height’, `${window.innerHeight}px`)
}
window.addEventListener(‘resize’, appHeight)
appHeight()
appHeight function has sets new style property var(` — app-height`) including current window height, — app-height it is necessary for next steps.
:root {
— app-height: 100%;
}html,
body {
padding: 0;
margin: 0;
overflow: hidden;
width: 100vw;
height: 100vh;
height: var( — app-height);
}
In the previous step I’ve created the reference — app-height, wrapping in the var() I’ve received CSS variable var( — app-height). This variable is allowed to read values created by JS.
2. CSS solution (not recommend)
The last, but not the least solution is ` — webkit-fill-available`, this solution works only on Apple devices, it won’t solve the problem on Android devices. I don’t recommend this solution, but it’s worth showing.
height: 100%;
height: -webkit-fill-available;Thank you for your attention! I’ll appreciate your feedback.
If you like this article, follow me on Twitter [@MaciejDEV](https://twitter.com/MaciejDEV)
