Introduction

When you’re designing a website, making sure your layout looks good on all screen sizes is key. That’s where viewport units like viewport height (vh) come in handy. You might have seen "vh" in CSS and wondered what it means or how it works.

In this article, I’ll explain what viewport height (vh) is, how it works in CSS, and why it’s useful for creating responsive designs. By the end, you’ll know how to use vh units to make your web pages adapt smoothly to different screen sizes.

What is Viewport Height (vh) in CSS?

Viewport height (vh) is a CSS unit that measures the height of the browser’s visible area, called the viewport. The viewport is the part of the browser window where your web page content appears, excluding things like the browser’s toolbars or scrollbars.

• 1vh equals 1% of the viewport’s height.
• If your viewport height is 800 pixels, then 1vh equals 8 pixels.
• Using vh units lets you size elements relative to the screen height, not fixed pixels.

This means if you set an element’s height to 50vh, it will always take up half the height of the visible screen, no matter what device or window size you’re using.

Why Use Viewport Height (vh) in Web Design?

Using vh units helps you create flexible layouts that adapt to different screen sizes. Here’s why vh is useful:

• Responsive design: Elements sized with vh adjust automatically to the user’s screen height.
• Full-screen sections: You can easily create sections that fill the entire screen height, perfect for hero images or landing pages.
• Consistent vertical spacing: vh units help maintain consistent spacing on different devices without media queries.
• Better control than fixed pixels: Fixed pixel heights can look too small or too large on different screens. vh scales with the viewport.

For example, a header set to 10vh will always be 10% of the screen height, whether on a phone, tablet, or desktop.

How to Use Viewport Height (vh) in CSS

Using vh in CSS is straightforward. You just add it as a unit for height, max-height, min-height, or other properties that accept length values.

Here are some common ways to use vh:

/* Full viewport height section */
.section-full {
  height: 100vh;
}

/* Half viewport height */
.half-height {
  height: 50vh;
}

/* Minimum height of 75% viewport */
.min-height {
  min-height: 75vh;
}

You can also combine vh with other units for more complex layouts:

/* Height minus fixed header */
.content {
  height: calc(100vh - 60px);
}

This example subtracts a fixed header height from the viewport height, so the content fits perfectly below the header.

Common Use Cases for Viewport Height (vh)

Here are some practical examples where vh units shine:

• Hero sections: Make a hero banner fill the entire screen height for a bold, immersive look.
• Modals and popups: Set max-height using vh so popups don’t overflow the screen on smaller devices.
• Full-page sliders: Each slide can be 100vh tall to fill the screen perfectly.
• Sticky footers: Use vh to calculate remaining space and keep footers at the bottom.
• Vertical centering: Combine vh with flexbox to center content vertically in the viewport.

Using vh units in these ways helps create layouts that feel natural and consistent across devices.

Differences Between vh and Other Viewport Units

CSS offers several viewport units besides vh. Here’s how vh compares:

While vh focuses on height, vw is about width. vmin and vmax are useful when you want to size elements based on the smaller or larger viewport dimension, which helps with responsive designs that adapt to both portrait and landscape modes.

Browser Support and Considerations for vh

Viewport units like vh are widely supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and mobile browsers. However, there are some things to keep in mind:

• Mobile browser UI: On mobile devices, browser toolbars can appear or disappear, changing the viewport height dynamically. This can cause vh-based elements to resize unexpectedly.
• Workarounds: Some developers use JavaScript or CSS environment variables (like env(safe-area-inset-bottom)) to adjust for mobile UI changes.
• Performance: Using vh units is efficient and doesn’t impact page load times.

Overall, vh is reliable but test your design on multiple devices to ensure it behaves as expected.

Tips for Using Viewport Height (vh) Effectively

To get the most out of vh units, keep these tips in mind:

• Combine with flexbox or grid: Use vh with modern layout systems to center or space content vertically.
• Avoid fixed heights on small elements: vh is best for larger containers or sections, not tiny buttons or icons.
• Use min-height or max-height: These properties help prevent elements from becoming too small or too large on extreme screen sizes.
• Test on mobile: Check how vh behaves with mobile browser UI changes and adjust if needed.
• Use calc() for complex layouts: Combine vh with pixels or percentages for precise control.

By following these tips, you can create flexible, user-friendly designs that look great everywhere.

Examples of Viewport Height (vh) in Action

Here are some simple examples to illustrate vh usage:

Full-Screen Hero Section

.hero {
  height: 100vh;
  background: url('hero-image.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
}

This makes the hero section fill the entire screen height, with centered text.

Modal with Max Height

.modal {
  max-height: 80vh;
  overflow-y: auto;
  background: white;
  padding: 20px;
  border-radius: 8px;
}

The modal won’t exceed 80% of the viewport height, preventing overflow on small screens.

Content Area Below Fixed Header

.header {
  height: 60px;
  position: fixed;
  top: 0;
  width: 100%;
  background: #333;
  color: white;
}

.content {
  height: calc(100vh - 60px);
  margin-top: 60px;
  overflow-y: auto;
}

This layout keeps the header fixed and makes the content fill the rest of the viewport height.

Conclusion

Viewport height (vh) is a powerful CSS unit that helps you build responsive, flexible web layouts. By sizing elements relative to the visible screen height, vh units make it easier to create full-screen sections, modals, and other components that adapt smoothly to different devices.

Remember to test your designs on various screen sizes, especially mobile, to handle dynamic viewport changes. When used thoughtfully with other CSS tools like flexbox and calc(), vh can improve your site’s usability and visual appeal.

Now that you understand what viewport height (vh) is and how to use it, you can start applying it to your projects and make your web designs more responsive and user-friendly.

---

FAQs

What does 1vh mean in CSS?

1vh equals 1% of the viewport’s height. If your screen height is 900 pixels, 1vh equals 9 pixels. It’s a unit for sizing elements relative to the visible height of the browser window.

Can viewport height (vh) cause issues on mobile devices?

Yes, because mobile browsers show or hide UI elements like address bars, the viewport height can change dynamically. This may cause vh-based elements to resize unexpectedly, so testing and adjustments are important.

How is vh different from vw in CSS?

vh measures 1% of the viewport height, while vw measures 1% of the viewport width. Use vh for vertical sizing and vw for horizontal sizing to create responsive layouts.

Can I use vh with other CSS units?

Absolutely. You can combine vh with pixels or percentages using the calc() function for precise control, like height: calc(100vh - 50px); to subtract fixed elements from viewport height.

Are viewport units supported in all browsers?

Yes, viewport units including vh are supported by all modern browsers on desktop and mobile. However, behavior on mobile browsers may vary due to UI elements affecting viewport size.