Some Things You Oughta Know When Working with Viewport Units

David Chanin has a quickie article summarizing a problem with setting an element's height to 100vh in mobile browsers and then also positioning something on the bottom of that.

Summarized in this graphic:

The trouble is that Chrome isn't taking the address bar (browser chrome) into account when it's revealed which cuts off the element short, forcing the bottom of the element past the bottom of the actual viewport.

<div class="full-page-element">  <button>Button</button></div>

.full-page-element {  height: 100vh;  position: relative;

… Read article

The post Some Things You Oughta Know When Working with Viewport Units appeared first on CSS-Tricks.