I was asked by a visitor how he could set the height of a DIV block so that it occupied all the vertical space
of a web browser's window (technically, "viewport"). He had tried using "height: 100%" on a web page,
and found that it did not work as expected.
The method described below can be used for any HTML element, including, of course, the DIV element mentioned above. And it is also relevant if you want to set the height of an element to any percentage (not just 100%) of the viewport.
This answer assumes that you know some CSS. At the very least, you should be able to insert CSS into a web page.
I will also be using the term "viewport" instead of "window" (which my visitor used), since this is the more precise term that avoids any ambiguity. In this context, it basically refers to the portion of a web browser's window where a web page is displayed. It does not include things that are part of the browser itself, like the title bar, tabs, location bar, and the like.
The reason that the CSS rule "height: 100%" did not work as expected is because percentage units for
width and height are computed relative to the enclosing container's width and height. By "enclosing container",
I mean the outer block where the DIV tag you want to style is placed. If it is not currently placed inside another
block, then the enclosing container is <body>.
Since the height of such a container depends on numerous things, including its content (eg, words and pictures) and CSS rules, you cannot simply use "height: 100%", or indeed any fraction of 100%, without also accounting for the size of all those other things. This, as you can imagine, is a formidable task, since you will then have to compute stuff like the size of the fonts, pictures, the space in-between, how they are laid out, etc.
A simple way to solve this is to use the viewport percentage unit vh instead of %.
One vh is defined as being equal to 1% of a viewport's height. As such, if you want to specify that
something is 100% of the latter, use "height: 100vh". Or if you want to make it
half the height of the viewport, say "height: 50vh". And so on.
For the sake of completeness, I should probably also mention that if you wish to specify the width of
an element as a percentage of the viewport's width, the corresponding unit is vw. One vw
is equal to 1% of the viewport's width, so a rule of "width: 100vw" causes the element to
fill the entire length of the viewport.
The vh and vw units were only introduced in CSS 3. As such, they require modern browsers.
Copyright © 2022 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Set the Height of a DIV Relative to a Browser Window (CSS)
