Height Percentage In HTML

Share This:

If you like my work show support on my Patreon
pcw-browsers-primary-100609192-largeA common question people ask when they are learning HTML is why they can’t make the height of an element 100%. The answer is you absolutely can.

If you understand the logic of HTML the answer is clear on how to do it. If your asking or having problems then you may not fully understand the logic.

Lets examine a basic HTML page.


<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

Now if you know even the most basic HTML. This should be clear and you should be able to visualize what page will look like in a web browser.

Now lets add a div with nothing inside of it.


<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<div></div>
</body>
</html>

Can you see the div when you view the page in a web browser? Maybe it is because div doesn’t have any color? Lets add some color to it.


<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<div style="background-color: #ff0000;"></div>
</body>
</html>

Wait we still can’t see the color. We read left to right top to bottom. And so do the web browsers that display our web pages. As far as the browser is concerned the end is the end.  We need to tell the browser to make the entire page 100% in height. Once we make the entire page 100% in height then we can make anything 100% in height.

Remember HTML is like algebra. What we do to one side we must do to the other side. So we have the <html> at the top and at the bottom we have </html>. So the browser sees that first. And since the <html> tag doesn’t have a specified height, it only takes on the height that is needed by the objects nested inside of it. What happens if we make our code look like the following.


<html style="height: 100%">
<head style="height: 100%">
<title>Hello World</title>
</head>
<body style="height: 100%">
<h1>Hello World</h1>
<div style="background-color: #ff0000; style="height: 100%"></div>
</body>
</html>

Oh my god, it worked. But if we understood the logic we should have known it would work.

If you like my work show support on my Patreon