46

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?

Community
  • 1
  • 1
dnc253
  • 39,967
  • 41
  • 141
  • 157
  • 2
    Have you read what inherit does? If the container does not have a specified height which means it will be auto, then you are going to inherit the auto. Example http://jsfiddle.net/50oaax77/ – Huangism Feb 05 '15 at 19:57
  • https://developer.mozilla.org/en-US/docs/Web/CSS/inherit – j08691 Feb 05 '15 at 19:59
  • @j08691 - Note that for the relevance to this question, that MDN document has an important mistake in its first paragraph. The element inherits the *specified value* from its parent, not its computed value. See http://www.w3.org/TR/CSS2/cascade.html#value-def-inherit – Alohci Feb 06 '15 at 01:03

2 Answers2

97

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.

Nepoxx
  • 4,849
  • 5
  • 42
  • 61
  • @HashemQolami Great example! I would suggest adding a margin to the child div to visually show that it is contained within the parent. – Nepoxx Feb 05 '15 at 20:04
  • Ah, this is the key. I wasn't thinking about percents. If the container has a percent of anything other than 100%, this element certainly wouldn't be doing what I want it to do. I'll accept as soon as it lets me. – dnc253 Feb 05 '15 at 20:05
  • @Nepoxx Thanks, I've just updated the example, added a `padding` to the `.parent` including `box-sizing`. – Hashem Qolami Feb 05 '15 at 20:08
2

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

shiva
  • 5,083
  • 5
  • 23
  • 42
benscabbia
  • 17,592
  • 13
  • 51
  • 62