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 widthvh
: 1/100th viewport heightvmin
: 1/100th of the smallest sidevmax
: 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.
Janeth Kent
Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.
Related Posts
New graphic window units - CSS
''Intercop 2022' is a project announced by Google, Microsoft, Apple and the Mozzilla Foundation to make all browsers offer the same web experience. The project has 15 focus areas and one…
Let's create a Color Picker from scratch with HTML5 Canvas, Javascript and CSS3
HTML5 Canvas is a technology that allows developers to generate real-time graphics and animations using JavaScript. It provides a blank canvas on which graphical elements, such as lines, shapes, images…
Use the SRCSET attribute to improve your SEO
There is a new standard HTML attribute that can be used in conjunction with IMG called SRCSET. It is new and important as it allows webmasters to display different images…
How To Add Filter Effects to Images with CSS
To achieve interesting effects on your images, learn about the 'filter' and 'Backdrop-Filter' properties of CSS. CSS filters are a very attractive feature of CSS that allows you to apply certain…
Introduction to BEM (Block Element Modifier)
Problems with naming CSS classes I think I might not be the only one with this experience: after finally grasping all the important concepts regarding CSS I wanted to start giving…
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 : 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…