Guide to Viewport Units Vw, Vh, Vmin and Vmax

by admin admin Date: 23-02-2017 viewport css3 webdesign


The viewport is the area where the browser renders the site. This is your screen minus the reserved space of the browser chrome. Sometimes you want to size an element based on that viewport, like a sidebar. This can be done using a unit we’re all familiar with: percentages.

.sidebar { width: 25% }

Let’s set the height equal to the viewport.

html, body { height: 100%; }
    
.sidebar {
  height: 100%;
  width: 100%;
}

What’s going wrong here? Why does html and body require a height? Percentages are relative to it’s parent properties. When the parent’s height is defined by it’s children, there’s no known height to set, so the height is ignored entirely. That means you would have to set the height on every parent element in the DOM tree. You could also use the new viewport units.

 

Viewport-percentage lengths

The viewport units are a new set of units designed for the challenges we face today. One-pagers, full-width grids, typography, and many other things rely on the size of the viewport. Previously, we hacked these challenges using percentages as mentioned earlier, or JavaScript.

This new set of units consists of four different units. Two for each axis, and a minimum and maximum value of the two.

  • vw: 1/100th viewport width
  • vh: 1/100th viewport height
  • vmin: 1/100th of the smallest side
  • vmax: 1/100th of the largest side

Note: IE9 uses vm instead of vmin. It does not support vmax.

Just to clarify: 1vmax equals 1vh in portrait mode, whilst in landscape mode, 1vmax will equal 1vw.

 

Caution: one major drawback

Imagine you’re building a full-width square grid using these units. I suppose that would look something like this:

.grid {}
    
.grid::before,
.grid::after {
  clear: both;
  content: '';
  display: block;
}
    
.grid__item {
  box-sizing: border-box;
  float: left;
  height: 50vw;
  padding: 2em;
  width: 50vw;
}

At some point, the items will overflow the viewport. On Windows, a scroll bar will appear, slightly shrinking the viewport. On OS X, a smart scroll bar will appear over the content which shows and hides automatically, thus not affecting the viewport. How is that relevant? Here’s a bit of the specification:

When the value of ‘overflow’ on the root element is ‘auto’, any scroll bars are assumed not to exist.
http://www.w3.org/TR/css3-values/#viewport-relative-lengths

That means, when the root element’s overflow is set to auto, which is the default value, scroll bars are assumed not to exist. That means 100vw is the width of the viewport, scroll bar included. In OS X, everything will look fine. On Windows however, the two grid items together are wider than the viewport, scroll bar excluded, thus will be unable to render the two blocks next to each other.

Luckily, this is isn’t a difficult problem to overcome. The easiest way is to simply set the parent’s overflow property to hidden if the parent should grow along with the content. If it should scroll, set it to scroll.

If you’re using the latter but you’re annoyed a scroll bar is displayed even when you cannot scroll, you can use JavaScript to compare the element’s height to the amount of scrolling you can do.

var element = document.documentElement;
  
if(element.scrollHeight > element.clientHeight) {
  // Overflow detected; force scroll bar
  element.style.overflow = 'scrollbar';
} else {
  // No overflow detected; prevent scroll bar
  element.style.overflow = 'hidden';
}

For more robust implementations to detect whether a scroll bar is visible or not, see “Crossbrowser JavaScript Scrollbar Detection” by Tyler Cipriani or “Detect If a Page Has a Vertical Scrollbar” on Stack Overflow if you prefer jQuery.

 
by admin admin Date: 23-02-2017 viewport css3 webdesign hits : 1969  
 
 
 
 

Related Posts

    Parallax Landscape Scenes Built Entirely With CSS and HTML

    Web design trends come and go, but the parallax effect has, well, stuck around. Parallax scrolling has had a big impact on user interface design, on both websites and mobile…

    Fullscreen Background Video HTML5 And CSS cross-browser

    Full-screen Background Video is a way to present your website playing a video in the background without disturbing its content. It makes your website very modern and different. So, in…

    Useful Tutorials on SVG & CSS3 Animation

    There isn't just one way to do SVG and CSS3 animations. Animation is one such area which has been quite complicated until recently. Today we're going to look some tutorials…

    CSS Flexbox Toolbox: some tools

    The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes…

    Ideas shaping web design today

    Web design in order to succeed needs two things: innovation and imitation. Unfortunately, the last one often wins. Web designers love to learn, study and use the latest trends, and then…

    CSS Animations: the Pocket Guide

    With CSS3 we acquire the ability the ability to write behaviors for transitions and animations. Front end developers have been asking for the ability to design these interactions within HTML…

    CSS: Image Hover Effects You Can Copy and Paste

    In the past, we’ve wrote about some awesome examples of CSS effects that were easy to copy and paste right into your code. Today, we’re going to follow that up with ten…

    15 Must Have CSS Tools for Designers

    There are a lot of tools and tutorials which can help designers and developers in learning CSS easily and rapidly. In this article we have listed 15 css tools which can help designers…

    10 Best CSS Gradient Generators

    CSS3 changes everything. There are 116 new properties* with multiple vendor prefixes and different syntaxes. No one could be expect you to memorize everything. Fortunately, there are a number on…

    WebDev:32 New Tools and Services for Web Developers

    Web developers should always be aware of the current news. In order to help them in their work brilliant web developers from all over the world always try to invent…

    Long Shadows: Tutorial, Resources, Examples and Videos

    Within the flat design trend on the rise at the moment, especially in this world of the web, one thing that stands out is the use of long flat shadows,…

    10 CSS Media Query Snippets

    Responsive Web Design has gained huge popularity and demand over the years. With novel gadgets being developed every year it is necessary for a Web Developer to make sure that…