• Metadata
• Referanser
• Poster med lik tag

CSS fix for 100vh in mobile webkit

This minor fix did the trick:

The original css class looked like this. It worked find on desktop sized viewport. But on smaller viewports the 100vh was ignored.

.full-viewport-height {
    height: 100vh;
}

As the page resources points out, adding a min-height will solve my problem. “-webkit-fill-available” also solves it for user using Safari.

.full-viewport-height {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    height: 100vh;
}

I later figured out that I had to remove the “height” - property in order to get this work all the time.

.full-viewport-height {
    min-height: 100vh;
    min-height: -webkit-fill-available;
}