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:

		<div class="my-div">

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.

You may also like:

Love our articles? HostM offers professional and helpful web hosting services with unlimited features and renewal rates that actually match our advertised rates.