Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Height Percentage In HTML

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




Hello World


Hello World





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.




Hello World


Hello World





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.




Hello World


Hello World





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 alegebra. What we do to one side we must do to the other side. So we have the at the top and at the bottom we have . So the browser sees that first. And since the 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.




Hello World


Hello World





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



This post first appeared on Tech Me Out, please read the originial post: here

Share the post

Height Percentage In HTML

×

Subscribe to Tech Me Out

Get updates delivered right to your inbox!

Thank you for your subscription

×