Intellipaat Back

Explore Courses Blog Tutorials Interview Questions

How to make a div 100% height of the browser window

0 votes
2 views
in Web Technology by (20.3k points)

I have a layout with two columns - a left div and a right div.

The right div has a grey background-color, and I need it to expand vertically depending on the height of the user's browser window. Right now the background-color ends at the last piece of content in that div.

I've tried height:100%, min-height:100%;, etc.

1 Answer

0 votes
by (40.7k points)

You'll be learning about what are Viewport-Percentage Lengths, How can this be used to make a divider fill the height of the browser and How is 100vh different to 100% one by one in detail.

There are a few CSS 3 measurement units called: Viewport-Percentage (or Viewport-Relative) Lengths

First, understand "What are Viewport-Percentage Lengths?"

The size of the initial containing block will be relative to the viewport-percentage lengths. But if the height or width of the initial containing block is changed, they will be scaled accordingly.

Here, vh unit is used for (viewport height), vw unit is used for (viewport width), vmin unit is used for (viewport minimum length) and vmax unit is used for (viewport maximum length).

Let's understand "How can this be used to make a divider fill the height of the browser?"

For the above question, you can try making use of vh: 1vh is equal to 1% of the viewport's height i.e. 100vh will be equal to the height of the browser window, doesn't depend on where the element is situated in the DOM tree:

HTML

<div></div>

CSS

div {

    height: 100vh;

}

This is literally all that's needed. For more information, refer to this JSFiddle example of this in use.

In the case of the question at hand, featuring a left and a right divider, here is a JSFiddle example showing a two-column layout involving both vh and vw. Now, let's understand "How is 100vh different to 100%?"

You can take this layout for example:

<body style="height:100%">

    <div style="height:200px">

        <p style="height:100%; display:block;">Hello, world!</p>

    </div>

</body>

Here, the p tag is set to 100% height, since, its containing div has 200 pixels height, so the 100% of 200 pixels becomes 200 pixels, not 100% of the body height. But if you are using 100vh instead means that the p tag will be 100% height of the body regardless of the div height.

Related questions

0 votes
1 answer
Expanding a parent <div> to the height of its children
asked Sep 6, 2019 in Web Technology by Tech4ever (20.3k points)
0 votes
1 answer
CSS - Expand float child DIV height to parent's height
asked Aug 29, 2019 in Web Technology by Tech4ever (20.3k points)

Browse Categories

© COPYRIGHT 2011-2024 INTELLIPAAT.COM. ALL RIGHTS RESERVED.

Download Salary Trends Now !

Learn how professionals like you got up to 100% Salary Hike.

...