CSS 高度：100% 与高度：继承答案

【问题标题】：CSS height: 100% vs height: inheritCSS 高度：100% 与高度：继承
【发布时间】：2019-12-19 17:27:09
【问题描述】：

我看到有人问the difference between height: 100%; and height: auto;，但是height: 100%; 和height: inherit; 有什么区别？

我基本上希望这个元素的高度能够填充/匹配它的容器。是否有理由使用100% 而不是inherit，反之亦然？

【问题讨论】：

你读过继承是做什么的吗？如果容器没有指定的高度，这意味着它将是自动的，那么您将继承自动。示例jsfiddle.net/50oaax77
developer.mozilla.org/en-US/docs/Web/CSS/inherit
@j08691 - 请注意，对于与此问题的相关性，该 MDN 文档在其第一段中有一个重要错误。元素从其父元素继承指定值，而不是其计算值。见w3.org/TR/CSS2/cascade.html#value-def-inherit

标签： css

【解决方案1】：

height: 100% 将匹配元素父元素的高度，而不管父元素的高度值。

height: inherit 顾名思义，将继承其父级的值。如果父级的值为height: 50%，那么子级也将是其父级高度的 50%。如果父级的大小以绝对值定义（例如height: 50px），那么height: inherit 和height: 100% 对子级的行为将相同。

【讨论】：

【解决方案2】：

height: inheritinherit 关键字指定属性应从其父元素继承其值。

height: 100% 定义包含块的高度（以百分比表示）

【讨论】：