Sorry this is a dumb question but why does the height property not apply to an element when you make use of percentage relative units. Example, if you have a div element and apply a CSS rule div{width:25%;height:25%;}, the width declaration applies to the div element but the height doesn't.
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (2)
Hi, this is because the height of a
div
element depends on the height of the containing block of thediv
element (see MDN Web Docs).Therefore if the containing, let's call it parent element has a hight explicit height of
400px
the inner element will have a height of100px
if you apply your CSS rule.If the parent element has no explicit height the height of the inner element is set automatically by the browser (
height: auto;
).An exception is when the element to which you apply your CSS rule is positioned absolute (
position: absolute;
), if thats the case the height of the element depends on the height of the next explicit positioned element or the viewport and in your case it has a height of 25% of the element.Let me give you a little example:
in the first case our CSS classes will look like this
now the inner
div
will have the height of the contained Text.In the second case our CSS classes are the following
in this case the inner
div
will have a height of 250px because the outerdiv
has an explicit height.The last one is our edge case with the following classes
Now our inner element is positioned absolute and in this case it will become 25% of the height of the viewport. Be careful with this approach since the
position: absolute;
will affect the positioning and the flow of the element on your site.I hope I could help you with this, feel free to ask if you have any further questions.
Thank you very much Matthias. I understand clearly now