Hello everyone!
First of all, as you have already read the title, you might think something like: “Oh no, this post again” , but I want to bump this topic one more time and discuss it.
The problem:
If you want to use height: 100vh for your “ or any other tag on mobile browsers that have this resizing address bar, your height will be also recalculated and can cause your content to jump/scale/move.
Is the problem that big ?
As for me, probably – yes. Thats why i want to talk about it. I am in love with 100vh and 100vw. They can make your life much easier and you can come up with pretty nice layouts with them.
Solutions:
1) Dont use 100vh on mobiles, man. – Huh? But i want to. I like my first section of the site to be 100vh, it isolates the first section of the page from the other content and really can bring some unique atmosphere to your section.
2) JS. But seriously ? Do we really need js for that ? I dont think so. As for me, i just dont feel like using js is an appropriate method.
3) CSS. Yes, i want css. I want some fresh 2018 CSS for that. But lets take a deeper look:
3.1)
transition: height 999999s
Looks legit ? I dont think so, more of a hack for me.
3.2)
@media ( ... ) {
height: calc( .... );
}
I dont know guys, these things just dont work for me. They just make the height a bit lower, but they are not dynamic.
I need your help!
How do you deal with this ?
