CSS max-height属性

CSS max-height属性用于设置元素的最大高度。

语法：max-height: value;

value：可选值包括像素(px)、百分比(%)、视窗单位(vh)、字体大小(em)等。

使用max-height属性

在以下代码中，我们将元素的max-height设置为200px：

div {
    max-height: 200px;
}

示例

在以下示例中，我们将一个<div>元素及其子元素的max-height设置为100px：

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum auctor, ligula eget ullamcorper cursus, nunc arcu fermentum odio, vel tincidunt leo turpis nec lacus.</p>
  <img src="https://via.placeholder.com/150" alt="placeholder image">
</div>

.container {
  max-height: 100px;
  overflow: auto;
}

以上代码中，当<div>元素内的内容超过100px高度限制时，overflow: auto;规则允许滚动条出现以便于查看完整内容。

总结

使用max-height属性能够帮助我们限制元素的最大高度，从而在响应式设计中提供更好的用户体验。