Viewport height (often written as vh) is a unit of measurement in web design that refers to the height of a user’s visible browser window. It’s part of the viewport-relative units family, which also includes vw (viewport width), vmin, and vmax. When a designer says something is “100vh,” it means that element should take up 100% of the height of the viewport — no matter what device or screen size the visitor is using. This makes vh a really handy tool for creating full-screen sections and responsive layouts.

Because different devices and browsers have varying screen sizes, using viewport height ensures that designs stay consistent and adaptive. Instead of relying on pixels or percentages tied to parent elements, designers can reference the actual browser view. This is especially useful when creating hero sections or splash screens that should always fill the user's screen.

Why viewport height matters for responsive design

One of the biggest challenges in web design is making content look good across devices — from desktops to phones. Viewport height helps solve this by letting you scale elements based on the actual height of the user’s screen, not just a fixed or guessed measurement. This means a layout can stretch to fill the entire screen on a phone and still look great on a big desktop monitor.

It’s commonly used in mobile-first design approaches because it responds to the user’s screen, not the surrounding layout. For example, a 100vh hero section on a smartphone will perfectly fill that screen without awkward scroll or whitespace. This flexibility leads to better UX, reduced scroll fatigue, and a more professional feel.

Common ways to use viewport height in CSS

Using viewport height in CSS is pretty straightforward. You just add it as a value to height-related properties. For instance:

css

CopyEdit

.hero-section {

  height: 100vh;

}

That line tells the browser to make the .hero-section element fill the full height of the browser window. You can also use values like 50vh for half the screen height or mix it with other units for more flexible layouts.

Designers use vh for modals, loading screens, sliders, or any content block they want to align exactly to the screen’s height. When paired with vw or other responsive units, it allows for highly adaptable and clean designs.

Considerations and limitations of using viewport height

While vh is incredibly useful, it’s not always perfect. On mobile devices, the visible viewport can change when users scroll or when the browser UI (like address bars) shows or hides. This can make 100vh appear taller than what’s actually visible, causing layout issues.

A common workaround is using JavaScript to detect the actual height of the viewport and adjust elements dynamically. It’s also important to test designs across different devices and browsers to catch any unexpected behaviors. Still, for many use cases — like splash sections and fullscreen modals — vh does the job nicely.

How viewport height affects SEO and user experience

While viewport height itself isn’t a direct SEO factor, it plays a role in how users interact with your website. A clean, well-structured design that adapts to screen size keeps users engaged and reduces bounce rates.

When used well, viewport height can improve the visual hierarchy, guide user focus, and support storytelling with full-screen content. That said, make sure critical information isn’t hidden below a full-screen element unless it's clear there's more to scroll. Balance beauty with usability.

FAQs about viewport height

What’s the difference between vh and % in CSS?

vh refers to a percentage of the browser window’s height, while % refers to a percentage of the parent container’s height. So 100% height might not be full-screen unless the parent element also stretches the full height. vh is more reliable for full-height designs.

Why doesn't 100vh work properly on mobile?

Mobile browsers sometimes hide the address bar or toolbars, which can cause the actual viewport height to shift. This may make a 100vh section appear too large or get cut off. JavaScript fixes or using updated CSS properties like svh can help.

Can I use viewport height with other units?

Absolutely. You can combine vh with other units like px, %, or em to fine-tune your design. For example, padding in em with height in vh lets you control layout and spacing responsively.

Is using vh better than using media queries?

They serve different purposes. Media queries let you change styles based on screen size breakpoints, while vh directly responds to the viewport size without extra code. Often, they’re best used together in responsive design.

Does viewport height affect performance?

Not directly. Using vh doesn’t impact loading time or speed. However, it can influence the layout and how users engage with content, which can indirectly affect user metrics used in SEO.

Build smarter with responsive tools

If you want a website builder that takes viewport height and other responsive design features into account, B12 has your back. Our platform is built for modern, mobile-friendly websites that adjust to every screen. With built-in tools for layout, blogging, and SEO, you’ll have everything you need to create a standout online presence. Sign up today and see how easy building a responsive site can be.