Using CSS Viewport Units to Fill the Browser Window with Your Website

Achieving full browser width and height regardless of the size of the screen

Craftsman measuring
Filling the full size of a screen is easier with Viewport Units.

A popular design treatment for websites today is to fill both the width and the height of the browser window with a large image and/or message on the homepage. On responsive websites where the layout changes based on a user’s device and screen size, these screen-spanning images must be variable in size if they are going to encompass the space available for these various screens. Achieving this variable size is easy, at least when it comes to the width, but getting the height of an HTML element to fill the available screen space has always been a struggle.

That struggle has ended with the introduction of CSS Viewport Units.

Using Percentages

An important component in both responsive and adaptive web design has long been using percentages for measurement units in place of pixels. If you had a division that you wanted to stretch across the full width of the screen, regardless of the size of that screen, you could do this:

The HTML –

<div class="container">
  <!-- content would go here -->
</div>

To style this, you could use this CSS:

.container {
  width: 100%;
 }

This division would now stretch across the full browser width and it would change as the screen changes. You could even use percentages to add some padding to the edges of that container and make those variables as well:

.container {
  width: 96%;
  padding: 0 2%;
  }

This would add padding of 2% to the left and right sides of the container (with 0 padding added to the top and bottom). That pair of side paddings would add up to 4%, so along with the 96% width you would still have a 100% wide element.

Now, you may assume that you could do the same with the “height” property, adding it on like this:

.container {
  width: 96%;
  padding: 0 2%;
  height: 100%;
  }

Sadly, this does not work as intended. Your “container” element will not automatically fill the height of the screen the way that it fills the width.

You could get this to work by also setting the height of the HTML and body elements to 100% or, depending on the markeup you are working with, the height of other parent elements in your page’s structure. This gets very confusing and is a lot of struggle for what should be a simple visual style.

Introducing Viewport Units

Viewport units work similar to percentages. To start with, we will look at two units:

  1. vw – this is “viewport width”
  2. vh – this is “viewport height”

For both of these, 1 unit is equal to 1/100 of the available space, or 1% of that space.  So if you wanted your container division to stretch the full width of the page, you could do this in CSS:

.container {
  width: 100vw;
  }

That is 100 viewport width, or 100% of the screen. Now, that works like the percentage we looked at previously does, but the great thing here is that the height would also work with these new units:

.container {
  width: 100vw;
  height: 100vh;
  }

Unlike using a percentage value for the height property, this new viewport height value does stretch our element to fill the full size of the browser window, both the width and the height! This approach is incredibly helpful when you are trying to create a large “billboard” display on a homepage and you want that display to completely fill the screen, with any other content just below the “fold” of that screen.

Viewport height will achieve this long desired style for you with just that one line of CSS and no need for all kinds of Javascript voodoo to try to determine the browser height and set values using those calculations.

Sizing More Than Just Divisions

One of the really nice things about using viewport units is that they can be used to size more than just structural elements like divisions. In fact, one of the best uses of viewport units is with web typography.
Say that you want a line of text to change its size as the screen changes.  You cannot achieve this using the typical units of measurements for fonts (pixels, ems, etc.), but with viewport units you could do this in your CSS file:

h1 {
  font-size: 10vw;
  }

Your heading’s font size would now be 10% of the width of the screen, which means the font size would dynamically change as the screen size changes.

Viewport height values would work in a similar fashion and you could play around with these values to achieve the look you are going for with your website design. You could even use a width value that would make the heading stretch the full width of the screen, (or the full height) changing along with that screen for the full range of sizes possible.

One Sizing Bug

One known issue with viewport width happens in certain browsers when you use viewport width units that equal 100%, but your page also requires a scroll bar. Because the scroll bar takes away from the available width of the screen, setting elements to comprise 100% of that screen will cause overflow issues once the scroll bar is added in. Because the 100% calculated width plus the scroll bar equals more than 100%, if you are sizing columns to appear side by side, those columns will drop and you will not get the look you are striving for.

To address this issue, set the CSS overflow property of your parent element to “hidden” or “scroll”, depending on whether or not that element should scroll along with the rest of the page (be aware, however, that if you use this property, a scroll bar will appear even when one is not needed).

Browser Support

Like any new development in website design, the big question is whether or not you can begin using this in your work. Determining when you can use new website design techniques is important, and viewport units already enjoy very robust browser support, meaning that you should be safe to integrate this into your website work today knowing that most browsers will render your styles as intended.

New Layout Techniques

Viewport units are just one of the new CSS layout techniques that are making their way into the web design industry, giving web professionals so many more options when it comes to creating site layouts. From CSS columns to CSS Grid Layout to new methods for responsive images, it is an exciting time to be a web designer and to be playing around with all these new developments.

Format
mla apa chicago
Your Citation
Girard, Jeremy. "Using CSS Viewport Units to Fill the Browser Window with Your Website." ThoughtCo, Jul. 26, 2016, thoughtco.com/using-css-viewport-units-4066241. Girard, Jeremy. (2016, July 26). Using CSS Viewport Units to Fill the Browser Window with Your Website. Retrieved from https://www.thoughtco.com/using-css-viewport-units-4066241 Girard, Jeremy. "Using CSS Viewport Units to Fill the Browser Window with Your Website." ThoughtCo. https://www.thoughtco.com/using-css-viewport-units-4066241 (accessed September 26, 2017).