Full height multi column layout

Full height multi column layout using CSS3 vh,vw,vmin and vmax unit

I had to create multi column layouts that span the entire height of the visible space pretty often. And it was very frustrating every single time.

column-layout-wrong
How can I make the two columns use the whole visible space?

Since CSS 3 there is a new unit you can use that defines a relative value of the viewport’s dimension. You can use this unit for width, height, min-height, max-height etc.

Its very easy to understand the new unit:

  • 1vh -> 1% of the viewport’s height
  • 1vw -> 1% of the viewport’s width
  • 1vmin -> 1% of the viewport’s smaller dimension
  • 1vmax -> 1% of  the viewport’s larger dimension

So defining an elements height to 100vh, that div would have the exact same height as the viewport. Note this doesn’t mean it is placed on top left corner and stretches the whole viewport. It just means the height of the div is equal to the viewport’s height. To make a div fill the whole viewport without scrollbars you would have to get rid of all all margins and paddings and place the div top left corner. Like so

Note this will fail when you start to add margins, paddings and borders. Thank you classic box model (content-box), I kinda hate you. You should use the new border-box model to get full control of your element’s dimensions. But that is a different story.

So here is how to make two divs next to each other:

 Links

http://www.w3.org/TR/css3-values/

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.