Modern 100% height divs

In 2011 I published a popular article, 100% height Divs with 2 lines of code, which showed how to use JavaScript to get around the difficult layout problem of having two elements side-by-side both at 100% height of their container. In 2012, an update was published which showed a similar solution using jQuery. Both of these methods are now obsolete, and modern css solves the problem quite simply.

Enter flex-box.

Flex-box, now widely supported, allows complex layouts Рlike the 100% problem Рto be solved simply and elegantly. A great post (CSS-Tricks has a great guide to flex-box (which I reference frequently))

Here is an example of a simple 2 column layout using flex-box:

See the Pen bpzQjo by Michael Jasper (@mdjasper) on CodePen.

And another example of a more complex layout using flex-box:

See the Pen XdOyay by Michael Jasper (@mdjasper) on CodePen.

And finally, an example of flex-box to build an entire page layout:

See the Pen Flexbox golden layout by Michael Jasper (@mdjasper) on CodePen.

 

Author: Michael Jasper

Michael is a Web Developer located in Northern Utah. When not programming, he enjoys spending time with his family, exploring the great-outdoors, and hit-and-miss cooking experiments.