jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS Tools

Dynamic Viewport Units Generator

Create CSS declarations using the modern viewport units: small (svh/svw), large (lvh/lvw), and dynamic (dvh/dvw). Each unit behaves differently on mobile browsers. Includes fallback declarations for older browser support.

Loading tool...

What is Dynamic Viewport Units Generator?

Modern CSS viewport units come in three variants. Small viewport (svh) is the viewport height minus the browser UI. Large viewport (lvh) is the viewport height with the browser UI retracted. Dynamic viewport (dvh) adjusts as the browser UI appears and disappears. These are useful for full-screen layouts on mobile where the browser address bar changes the visible area.

Quick answer

Use dynamic viewport units (dvh, svh, lvh) for layouts that need to fill the mobile viewport correctly when the browser UI expands and retracts. Always include a classic vh fallback for older browsers.

Limitations

  • Dynamic viewport units are only relevant on mobile browsers where the address bar and other UI elements expand and retract. On desktop, dvh, svh, and lvh behave identically to vh.
  • Some browsers update dvh on scroll end rather than continuously, which may cause a visible jump in element height as the address bar retracts.

How to use this tool

  1. Choose the unit type: svh, lvh, dvh, svw, lvw, or dvw.
  2. Set a percentage value for the viewport unit such as 100 for full height.
  3. Choose the CSS property to apply the viewport unit to, such as min-height or height.
  4. Copy the CSS declaration with the modern unit and a classic vh fallback.

What you can use it for

  • Create a hero section that fills the exact visible screen on mobile devices.
  • Prevent content from being hidden behind the mobile browser toolbar on scroll.
  • Build full-screen panels that adapt to changing viewport sizes as the browser UI appears and retracts.

Use cases

Practical examples

Example

Mobile hero with svh

A hero section uses min-height: 100svh to fill the screen while accounting for the mobile address bar. The classic vh fallback covers older browsers.

Example

Bottom navigation with dvh

A bottom navigation bar uses bottom: 0 with padding-bottom based on dvh to stay above the home indicator and adapt when the address bar retracts.

Common mistakes

  • Using dvh for every element when svh or lvh would provide more stable behavior for the specific use case.
  • Not providing a classic vh or vw fallback for browsers that do not support dynamic viewport units.
  • Using dynamic viewport units for desktop layouts where the simple vh unit works perfectly well.

Verification

  1. Load the page on a mobile device or emulator and scroll to confirm the element height adjusts correctly as the browser address bar retracts.
  2. Test with the browser UI both expanded and retracted to verify svh and lvh values produce the expected visible area.

FAQ

Questions about Dynamic Viewport Units Generator

When should I use dvh instead of vh?

Use dvh when the element must fill the exact visible area and adapt as the browser UI changes. Use vh for simpler cases or when a stable, unchanging height is preferred.

Which browsers support dynamic viewport units?

Chrome 108+, Edge 108+, Safari 15.4+, and Firefox 101+. Provide a classic vh or vw fallback for older browser versions.

What is the difference between svh, lvh, and dvh?

svh (small viewport height) is the height when the browser UI is expanded. lvh (large viewport height) is the height when the browser UI is retracted. dvh (dynamic viewport height) switches between the two as the UI appears and disappears during scrolling.

Do dynamic viewport units work on desktop?

On desktop browsers, dvh, svh, and lvh all behave the same as vh because desktop browsers do not have expandable or retractable chrome that changes the viewport size. Dynamic units only make a practical difference on mobile devices.

Related tools

More css tools

Also try

Also try