Make a Div 100% Height of Browser Window (or Parent)

There are a few modern techniques, as well as an older technique, that can be used to make any element stretch to fit its parent (or the browser window) 100% vertically (that is, 100% height). For our purposes, let’s assume we have a single <div> element (which could be any block element) as a direct child of the <body>.

Old technique (for older browsers)

First, we can use the old technique that works in older browsers:

* { box-sizing: border-box; } html, body { height: 100%; } .height { background: lightblue; min-height: 100%; }

Note that one of the keys to the above technique is ensuring that box-sizing: border-box; is applied so the child element doesn’t overflow the parent. Also, some padding and margin settings could break this. Here’s a demo:

The key is to keep in mind that, while <body> and <html> are going to naturally fit the browser window, the child element will be 100% of the height of the <body>, even if that means it overflows (e.g. depending on the presence of other elements or margin/padding).

Modern technique using vh units

Instead of percentage units, you can use the well-supported vh unit of measurement to get the same effect, but with a little less code, assuming the element is a direct child of the <body>:
* { box-sizing: border-box; } .height { background: lightblue; min-height: 100%; }

Again, this is dependent on inner elements and possibly box-sizing: border-box;, with no need for 100% height on the parent. But note that this will only work if the element is a direct child of the <body> because the vh unit represents 1/100th of the browser (viewport) height.

Modern technique using Flexbox

In some cases, the best solution might be to use flexbox, as follows:

html, body { height: 100%; } body { display: flex; } .height { background: lightblue; flex-grow: 1; }

As you can see, box-sizing: border-box; isn’t required. The flex-grow property makes the child element grow to fit whatever the height of its parent is, without breaking the layout. You should also keep in mind that this makes all child elements of the <body> flex items, so you’ll have to weigh the pros and cons of using this solution.

Note: To the best of our knowledge, the information above and the snippet are accurate and up to date. However, in case you notice something wrong, please report snippet or leave a comment below.
Back to Snippets

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

Most Searched Articles

14 of the Best JavaScript Libraries and Frameworks to Try Out in 2020

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

50+ Best Free WordPress Themes for 2020 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than 60+ such themes for you right ...

10+ Best WordPress Hosting Providers of 2020 Compared & Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10 best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for Beginners and Advanced Users Alike

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an eCommerce Business From Scratch (In 10 Steps)

Is 2020 going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...

Scroll to Top