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

You need to stretch the first block of the page to fill the browser screen height.

Came to mind two solutions: specify block rule height: 100vh OR to set html, body and height: 100%.

On PC everything works the same, but what about mobile browsers? Are there any pitfalls?

Know that in the past waswhether they so far?
April 19th 20 at 12:26
1 answer
April 19th 20 at 12:28
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.

Find more questions by tags CSS