Height ,percentages and div | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
0

Height ,percentages and div

Why does the percentage sign(%) not work in specifying the height of a div tag in html5?

31st Dec 2020, 2:33 PM
...
... - avatar
7 Answers
+ 2
... Could you Post the code that supports your Question...
31st Dec 2020, 2:44 PM
Alphin K Sajan
Alphin K Sajan - avatar
+ 1
Because percentage% value is referred to the parent width, not height.
1st Jan 2021, 1:17 AM
Calviղ
Calviղ - avatar
+ 1
As you're using a relative unit (%, relative to its parent) you have to set the height of every parent of your element, otherwise they'll be taking the auto height (i.e. the necesary height to contain its children) and the percentage sign would be meaningless. So try setting the height of the div's parents (including the html element). Also remember that inline elements can't contain block-level elements.
1st Jan 2021, 6:37 AM
Marfik Em
Marfik Em - avatar
+ 1
... I think that's because the default setup of block-level elements: the auto value for width and height properties, i.e. take up all the width available for the width property and take up the minimun necessary height to contain its children for the height property. So, width: x%; /*x% of its parent width*/ height: 100%; /*if parent's height is set to auto (the default), the height of its children, otherwise parent's height*/ Add this css style rule into your style element: html, body, body > center, body > center > div { height: 100%; } Also note that center element is deprecated and padding-color property doesn't exist.
1st Jan 2021, 3:52 PM
Marfik Em
Marfik Em - avatar
0
Marfik Em but using percentage on the width attribute works just fine without relativity to its parent
1st Jan 2021, 9:30 AM
...
... - avatar
0
Calviղ so in other words, percentage does not work for height?
1st Jan 2021, 9:31 AM
...
... - avatar