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.
Back