CSS max-height 属性

CSS max-height 属性用于设置元素的最大高度，该属性用于控制元素在垂直方向上可展示的最大高度。当元素的实际高度超过了设置的最大高度时，元素的内容会自动向上滚动，以保证内容始终处于设置的最大高度内。

语法

max-height 属性的语法如下：

selector {
    max-height: value;
}

其中 selector 是 CSS 的元素选择器，可以是任何有效的选择器，value 是用于设置元素最大高度的值，可以是一个任何有意义的长度值，如像素(px)、百分比(%)、英寸(in)、厘米(cm)，也可以是一些特殊的值如none或initial。

值

下面是max-height属性可以取的几种值：

length：设置元素的最大高度。
percentage：设置元素的最大高度，基于其包含块容器的高度计算。
none：元素没有最大高度限制。
initial：将max-height重置为它的默认值，即none。
inherit：继承父元素的max-height属性值。

示例

下面是设置元素最大高度的示例：

<!DOCTYPE html>
<html>
<head>
    <title>CSS max-height Property</title>
    <style>
        .box {
            max-height: 150px;
            overflow: auto;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
<body>

<div class="box">
    <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
</div>

</body>
</html>

在上述示例中，我们给一个 <div> 元素设置了 max-height 属性，且设置了一个固定的值150px。此外，我们还将元素的 overflow 属性设置为 auto，这样在元素的内容超出它的最大高度时，文本框会出现垂直滚动条展示溢出内容。最后，我们设置元素的边框和内边距，以更好地突出元素的内容被限制的视觉效果。

注意事项

max-height 属性是一个块级元素属性，所以无法与行内元素一起使用。
如果元素设置了 height 属性值，且小于设置的 max-height 属性值，那么元素会展示为设置的 height 属性值这么高，不会展示为 max-height 属性值这么高；
如果元素的高度不足包含所有内容，那么元素的 max-height 属性值不会有任何效果；
如果元素的里面的表格元素设置了 height 属性，那么 max-height 和 height 属性的值需要同时设置，来保证表格元素可以正常展示，同时不会影响其他内容的显示。

结束语

CSS max-height 属性是控制元素在垂直方向上最大显示高度的一种方式。在合理使用该属性的情况下，可以让我们更好地控制元素在垂直方向上的布局。

CSS margin-top 属性 CSS max-width 属性