How to Set the Height of a DIV Relative to a Browser Window (CSS)

Using a height that is a percentage of the viewport


How to Set the Height of a DIV Relative to a Browser Window/Viewport (CSS)

by Christopher Heng, thesitewizard.com

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.

Preamble

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.

Why "Height: 100%" Did Not Work Correctly

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.

Use Viewport Percentage Units Instead

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.

Compatibility

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

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

How to Link to This Page

It will appear on your page as:

How to Set the Height of a DIV Relative to a Browser Window (CSS)





Home
Donate
Contact
Link to Us
No Spam Policy
Privacy Policy
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.