CSS中height:100%和height:inherit都是用来设置元素高度的属性。虽然它们都可以实现类似的效果，但在具体的应用场景中，它们之间也存在着一些差异
height:100%
height:100%用于将元素的高度设置为父元素的高度。在大多数情况下，我们需要确保页面布局的稳定性和兼容性，因此经常会使用这个属性来设置元素的高度。
- 设置高度自适应
使用height:100%可以使元素的高度自适应父元素的高度。例如：
<div class="wrapper">
<div class="content"></div>
</div>
.wrapper {
height: 500px;
}
.content {
height: 100%;
}
在这个例子中，我们设置了一个高度为500px的容器元素wrapper，并在其中添加了一个content元素。通过设置.content的height:100%，我们可以让它自适应wrapper的高度，从而达到页面布局稳定性和兼容性的目的。
- 实现垂直居中
有时，我们需要将元素垂直居中，而父元素的高度又不确定。在这种情况下，我们可以使用height:100%来实现垂直居中。例如：
<div class="wrapper">
<div class="content"></div>
</div>
.wrapper {
display: flex;
align-items: center;
}
.content {
height: 100%;
}
在这个例子中，我们设置了一个容器元素wrapper，并使用display:flex和align-items:center属性来将其内容垂直居中。然后，在.content元素中添加height:100%，使它自适应父元素的高度。
height:inherit
height:inherit用于将元素的高度设置为其父元素的高度，与height:100%类似。但是，它更多地用于继承父元素的高度值，并将其应用到子元素中。
- 继承父元素高度
使用height:inherit可以让子元素继承父元素的高度值。例如：
<div class="wrapper">
<div class="header">Header</div>
<div class="content"></div>
</div>
.wrapper {
height: 500px;
}
.header {
height: 50px;
}
.content {
height: inherit;
}
在这个例子中，我们设置了一个高度为500px的容器元素wrapper，并在其中添加了一个名为.header的子元素，其高度为50px。然后，在.content元素中添加height:inherit，使它继承父元素wrapper的高度值。
- 处理百分比高度
有时，我们需要处理一些父元素使用百分比值来设置高度的情况。在这种情况下，height:inherit可以帮助我们继承百分比高度，并将其应用到子元素中。例如：
<div class="wrapper">
<div class="content"></div>
</div>
html, body {
height: 100%;
}
.wrapper {
height: 50%;
}
.content {
height: inherit;
}
在这个例子中，我们设置了一个名为wrapper的容器元素，并将它的高度设置为50%。由于其父元素html和body的高度都设置为100%，因此它的高度实际上是屏幕高度的一半。然后，在.content元素中添加height:inherit，使它继承wrapper的高度值，并将其应用到自身中。
异同点分析
虽然height:100%和height:inherit都可以设置元素高度并继承父元素的高度值，但它们之间也存在一些差异。
- 使用场景不同
height:100%主要用于将元素高度自适应父元素的高度，从而实现页面布局稳定性和兼容性。它通常用于列布局、表格布局和内容部分的自适应等场景。
height:inherit则更多地用于继承父元素的高度值，并将其应用到子元素中。它通常用于处理父元素使用百分比高度或动态计算高度的情况，以保持页面布局的一致性和完整性。
- 继承方式不同 定合适，否则子元素的高度也会受到影响。
height:inherit则是通过将元素的高度设置为其父元素的高度来实现继承。这意味着子元素的高度只会继承父元素的高度值，并不会受到其他因素的影响。因此，在使用时需要注意继承方式的差异，选择合适的属性来应用。
- 兼容性差异
由于height:100%和height:inherit都是CSS2.1规范中的属性，因此大多数浏览器都支持它们的使用。但是，在一些较老的浏览器中，如IE6和IE7等，这两个属性可能存在兼容性问题。在使用时，需要根据具体的应用场景和目标浏览器，考虑是否需要进行兼容性处理。
使用注意事项
无论是height:100%还是height:inherit，在使用时都需要注意以下几点：
- 父元素必须有固定高度或已经被确定高度
当使用height:100%或height:inherit时，父元素必须已经有一个固定的高度值，否则子元素无法正确地继承其高度。如果父元素的高度是动态计算的，则需要先等到其高度被确定后再使用这两个属性。
- 不能与position:absolute一起使用
在使用height:100%或height:inherit时，通常不能与position:absolute一起使用。如果父元素的高度是通过其他方式（如padding）来计算的，则可能会导致子元素的高度不正确，从而影响页面布局。
- 兼容性问题需要考虑
在使用height:100%或height:inherit时，需要考虑不同浏览器之间的兼容性差异，并根据具体情况进行处理。例如，在IE6和IE7等较老的浏览器中，这两个属性可能存在兼容性问题，需要进行特别处理。
- 调试时注意元素盒模型
在使用height:100%或height:inherit时，需要注意调试元素的盒模型，以确保元素的实际高度符合预期。有时，元素的内边距和边框等因素也会影响元素的实际高度，需要进行相应的处理。
总结
height:100%和height:inherit都是用于设置元素高度的CSS属性，它们都可以实现继承父元素的高度值，并将其应用到子元素中。但是，在具体的应用场景中，它们之间也存在着一些差异。
在使用时，需要根据具体情况选择合适的属性，并注意父元素的高度确定、position:absolute的使用、兼容性问题和元素盒模型等方面的注意事项。只有在正确使用这两个属性的基础上，才能实现有效的页面布局和视觉效果。 height:100%是通过将元素的高度设置为父元素的高度来实现继承。这意味着子元素的高度会受到父元素高度的影响，并且需要确保父元素的高度稳
