CSS height: 100% vs height: inherit
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.
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