Full screen section with just one line of CSS

By | August 4, 2015

Hi,

Today i will talk to you about a discovery i do. This is the kind of discovery that make you love CSS. I refer to the CSS Viewport unit mesure.

Like many people, when i would make a fullscreen web site, i had choice between two techniques. The first was to detect the size of the screen in JavaScript and adapt the section size in consequence. The second was to define the section height and the height of all of it’s parent to 100% like this :

 
html, body { 
    height: 100%;
} 

section { 
    height: 100%; 
} 

This suit me quite well. But i begin to use the Javascript framework EmberJS that wrap all my elements with additional DIV. Having no control over them, full CSS method was no longer appropriate. While searching another solution, i find the Viewport unit of mesure that let me define the size of an element relative to the viewport.

 
section { 
    height: 100vh; 
}
 

This method no longer reflects the size of the parent elements. We can also use the vw, vmim, and vmax units to respectively define the size of the element to fit the  the width of the viewport, the axis smaller (length or width) and the axis largest (length or width). This method is supported by all modern browsers from IE9.

see you soon.

00

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.