Some Things You Oughta Know When Working with Viewport Units

David Chanin recently highlighted a common issue when using viewport units (vh and vw) for element sizing and positioning, particularly in mobile browsers. The problem arises when setting an element's height to 100vh and then absolutely positioning a child element at the bottom.

The illustration shows how Chrome on mobile devices doesn't account for the address bar (browser chrome) when calculating 100vh. This results in the bottom element being partially obscured behind the address bar.

Consider this example:

<div>
  <button>Button</button>
</div>

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

.full-page-element button {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

The button, expected to be visible at the bottom, is hidden because of the address bar's height.

A common workaround for full-height body content is:

body {
  height: 100vh;
  margin: 0;
}

However, this can lead to inconsistencies and jumpiness as the address bar appears and disappears. Using height: 100% on the body alone is also unreliable because the body's height depends on its content. A more robust solution requires targeting both html and body:

html, body {
  height: 100%;
}

The real challenge lies in positioning elements at the bottom edge of a full-height container using position: absolute. This approach is problematic due to the container's height potentially exceeding the visible viewport.

For fixed bottom navigation, position: fixed; bottom: 0; usually works well, as the browser chrome correctly adjusts its position.

Horizontal viewport units (vw) present similar issues due to scrollbars. 100vw is calculated without considering the scrollbar's width, leading to unexpected horizontal scrolling.

The need for improved viewport unit handling has been frequently raised by developers, but changing their behavior could break existing workarounds. This highlights the complexities of achieving consistent cross-browser compatibility with viewport units.

The above is the detailed content of Some Things You Oughta Know When Working with Viewport Units. For more information, please follow other related articles on the PHP Chinese website!