Make full screen sections with 1 line of CSS
Modern websites nowadays are having full screen sections on their homepage. If they are not full screen, they take at least 80–90% percent of the real estate and that needs developing time and a lot of javascript coding.
To give you an example of what I am talking about here are some examples of websites that are using this layout.
www.spotify.com
They use data-attributes to store the height proportions ex. data-autosize=”0.6" and then set the height of each section with javascript.
www.exposure.co
Exposure keeps a fixed 90% height for the head section and change the height with javascript on resize.
www.nimber.com
Nimber uses a technique similar to spotify. The height is set with javascript to 90% but also keeps a minimum min-height to make sure that the sections that are taller than the viewport, usually on mobile, will be displayed correctly.
and of course…
www.flickr.com
Yahoo rolled out earlier this year a full screen version of flickr that sets the height of every section to 100% and they also replaced scrolling with an artificial one. Here is the article on how its made.
All the previous examples are using javascript to achieve this layout, but what if we can make it happen with pure CSS, that is also supported from a big range of modern browsers?
What if we can make it only with 1 line of CSS…
.section { height: 100vh; }
Yes, viewport height, 1vh = 1% of browser’s height.
Without any effort, viewport height knows every single moment the height of your browser and can set that to your section accordingly. I made a codepen that uses this method and seems to work perfectly after some browser resizes I tried.
See the code here | Check out the demo
This method is so powerful, because you can make endless combinations of layouts. Let’s say that you want all the sections be 100% height but only the first be 90%, to give the feeling of continuity, that’s ok. What you need is again one more line:
.section { height: 100vh;}
.section—first { height: 90vh; }
The browser support is very good gets 78.38% on caniuse.com, with support of IE9+, take a look:
It looks too good to be true and without extensive test, can’t say what are the downsides of this technique and why you should or should not use. But you can give it a try and see on your own if fits your needs. You can backup the buggy browsers with some custom javascript or find a polyfill that does the job for you.
And last but not least I have to mention one last example that uses sectioning pretty well, only with CSS, by using a little different approach.
www.6wunderkinder.com
The guys from wunderlist use a fixed positioned header, that gives the option to set perfectly height: 100% their sections. It’s a little different approach with different pros and cons, but a great example without any js☺
It was an AHA moment in CSS and I am very interested to read your thoughts about this method. Post your notes here or tweet me @ckor.
