CSS | max-height 属性

CSS 的 max-height 属性用于设置元素的最大高度。这个属性对于限制元素高度非常有用。

语法

max-height: none|值;

属性值

• none：默认值，表示没有最大高度限制；
• 值：允许的任何长度单位值。

示例

div {
  max-height: 200px;
  overflow-y: auto;
}

以上代码将设置 div 元素的最大高度为 200 像素，超过这个高度的内容将会被隐藏。当需要查看被隐藏的内容时，可以在 div 元素上添加滚动条，通过 overflow-y 属性设置滚动条为垂直方向。

div {
  max-height: calc(100vh - 100px);
}

这个示例使用了 CSS3 中的 calc 函数，计算出 div 元素的最大高度为浏览器窗口高度减去 100 像素。这个方法在需要始终让元素保持屏幕内显示时非常有用。

总结

max-height 属性对于限制元素高度非常有用，通过设置最大值，我们可以削减内容溢出对布局和用户体验的破坏。同时，通过结合其他 CSS 属性，如 overflow 和 calc，我们可以进一步灵活地控制元素的高度。