How to make a <div> fit 100% height of browser window

Use the height CSS property to make a <div> fit 100% of the height of the window of a web browser.

By default, an HTML <div> element has a height that only just allows all of its child elements to fit within it.

This means that a <div> element whose parent is the <body> of a HTML page does not, by default, expand to fill the height of the window.

However, sometimes you may find the need to have the height of such a <div> stretched to fit the height of the window fully.

Making a <div> fit 100% the height of a browser window

In this example, you have a <div> on an HTML page:

<html>
	<body>
		<div class="my-div">
		</div>
	</body>
</html>

Here, the height CSS property is used to ensure that the height of the <div> is set to 100% that of the browser window:

.my-div {
	height: 100vh;
}

As you can see, the <vh> css unit is used for this purpose. <vh> stands for ‘viewport height’. Be careful not to insert a space character between the 100 and the vh, as that would not work.

That’s all there is to it! Your <div> now fully fits the height of the browser window.