Menu
I've seen the question asking the difference between height: 100%; and height: auto;, but what's the difference between height: 100%; and height: inherit;?
I basically want this element's height to fill/match it's container. Would there be a reason to use 100% over inherit or vice versa?
918
CSS properties such as height , width , border , margin , padding , etc. are not inherited.
4 Answers. Show activity on this post. height: 100% gives the element 100% height of its parent container. height: auto means the element height will depend upon the height of its children.
It just means 100% of the div or class or tag it is enclosed within.
container div has two parent elements: the <body> and the <html> element. And we all know that the default value of the height property is auto , so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.
height: 100% will match the height of the element's parent, regardless of the parent's height value.
height: inherit will, as the name implies, inherit the value from it's parent. If the parent's value is height: 50%, then the child will also be 50% of the height of it's parent. If the parent's size is defined in absolute values (e.g. height: 50px), then height: inherit and height: 100% will have the same behaviour for the child.
182
height: inherit The inherit keyword specifies that a property should inherit its value from its parent element.
height: 100% Defines the height in percent of the containing block
For examples, look here
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
