CSS max-height 属性

CSS max-height 语法

在 CSS 中，max-height 属性用于定义元素的最大高度。

语法：

max-height: 取值;

说明：

max-height 的取值主要有以下 2 种：

关键字：none（默认值，不限制高度）、fit-content 等。
数值：px、%、rem 等。

对于 max-height 属性，小伙伴们要清楚以下几点。

如果 height 的值大于 max-height，此时 max-height 属性会覆盖 height 属性。
max-height 属性不会覆盖 min-height 属性。如果 min-height 大于 max-height，则 max-height 会被忽略，元素高度由 min-height 决定。
max-height 对于控制高度由内容决定（height: auto;）的元素非常有用，可以防止它们变得过高。

CSS max-height 摘要

属于	CSS 盒子模型
使用频率	中
是否继承	否
默认值	none
兼容性	查看
官方文档	查看
MDN	查看

CSS max-height 示例

接下来，我们通过几个简单的例子来讲解一下 CSS max-height 属性是如何使用的。

示例 1：max-height 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p {
            max-height: 100px;
            width: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <p>绿叶网绿叶网</p>
    <p>绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网</p>
    <p>绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网</p>
</body>
</html>

页面效果如下图所示。

max-height 基本用法

分析：

由于 p 元素设置了 max-height: 100px;，因此由它内容撑起的高度最大值是 100px，超出高度的内容就会溢出到元素之外。

示例 2：max-height 制作垂直滚动区域

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .box {
            width: 200px;
            max-height: 150px;   /* 限制最大高度，并开启垂直滚动 */
            overflow-y: auto;
            border: 1px solid gray;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>第 1 行内容...</p>
        <p>第 2 行内容...</p>
        <p>第 3 行内容...</p>
        <p>内容很多，超过 150px 后会自动出现滚动条。</p>
        <p>更多内容...</p>
        <p>更多内容...</p>
        <p>更多内容...</p>
    </div>
</body>
</html>

页面效果如下图所示。

max-height 制作垂直滚动区域

分析：

在实际开发中，我们可以使用 max-height 配合 overflow-y: auto; ，来实现高度自适应但有上限的滚动列表。

CSS 与尺寸相关的属性

在 CSS 中，与尺寸相关的属性有很多，常用的如下表所示。

CSS 与尺寸相关的属性
属性	说明
width	定义元素的宽度
height	定义元素的高度
max-width	定义元素的最大宽度，防止其超过此值
max-height	定义元素的最大高度，防止其超过此值
min-width	定义元素的最小宽度，确保其不小于此值
min-height	定义元素的最小高度，确保其不小于此值