Are there any problems when you use height: 100vh, or 100% in mobile browsers?

It is better not to set height: 100vh; for the element which can contain important(or unimportant) the content as if it will be a little space in the parent block(such, alas, happens), he will climb beyond the parent:



As you can see, the text got outside. This is just an example, and instead of the text may be a couple of important blocks with something or just even the title, which for some reason will not fit.

This property causes this behavior of the elements because the height: 100vh sets strict height depending on the viewport of the browser. Of course, you can add overflow: hidden; to the parent block and then child elements will be clipped, but it's a vile approach and for this you need to beat the hand because the child content may be cropped by half and it will look pathetic. In the code commented out line: /*overflow: hidden;*/ you can remove the comments and see pruning.

Therefore, it is usually sufficient:

.element {
height: 100%;
min-height: 100vh;
}

To stretch the block to the full height of the screen and not to fall into the trap.

Example of normal display:



What about pitfalls. As far as I know, any problems when using this property, no. But these problems arestill relevant, but probably it will be relevant for it is absolutely not "terrible" problem, but it is a solved problem that is solved is not so difficult.