Percent compatibility issue

A

Acer

New Member
I have a content div whose background is red. I put a bunch of random text so it fills up several screens worth of text. I set overflow to auto, then set the height to 80% (in css). All of the browsers COMPLETELY ignore the 80%, but when I set it to a pixel value, it recognizes it and sets the height accordingly. :confused:
 
Last edited:
Phreaddee

Phreaddee

Super Moderator
Staff member
80% of what? without the parent having a set height it will obviously not work...

whilst a pixel value doesn't rely on its parent div to figure out what size it is meant to be...hence why it shows.
 
A

Acer

New Member
I want it to be 80% of the screen. How do I do that, since I can't choose what height the screen is?

EDIT: The parent element is the body, just so you know.
 
Last edited:
chrishirst

chrishirst

Well-Known Member
Staff member
To make a child element fill the body element you first have to make the body element fill the browser viewport. This is achieved by making the <html> and <body> elements to be 100% in length.

Code: 
html, body {
     height: 100%;
}

This makes those elements extend to/with the viewport length NOT just the client window height.
 
A

Acer

New Member
Thank you, chrishirst. I was just setting the body to 100% and it wasn't working, but I did the same thing to html and now it works. :D
 
You must log in or register to reply here.
Top