CSS Max Height

三、CSS Max Height的注意事项

1、CSS Max Height会影响元素的布局

当使用CSS Max Height设置元素的最大高度时，元素的高度将会受到限制。当元素内容高度超过最大高度时，元素的高度不再增加，因此，可能会导致元素的内容被截断。这会影响元素的布局，可能会影响页面的其他元素的位置和布局。

2、CSS Max Height不支持百分比值

在CSS中，max-height可以设置为一个具体的高度值，比如px、em、rem等单位，但不支持百分比值。因此如果需要针对不同屏幕尺寸设置不同的最大高度，就需要使用@media查询来实现。

下面是一个使用@media查询设置最大高度的例子：

<style>
    .box {
        height: 100%;
    }
    
    .box-content {
        max-height: 200px;
        overflow-y: auto;
    }
    
    @media (min-width: 1024px) {
        .box-content {
            max-height: 350px;
        }
    }
</style>
<div class="box">
    <div class="box-content">
        <p>这是一个很高的div</p>
    </div>
</div>

在上面的例子中，我们给一个容器元素设置了100%的高度，然后给内部的内容容器元素设置了最大高度200px，并且设置了overflow-y:auto属性，使得当内部内容超过200px高度时，会自动出现垂直滚动条。然后使用@media查询，给大屏幕设备设置了最大高度为350px，从而兼容不同屏幕尺寸的需求。

3、CSS Max Height和CSS Height

在使用CSS Max Height时，需要注意它和CSS Height的区别。Height用于设置元素的固定高度，而CSS Max Height用于限制元素的最大高度，并不会影响元素的最小高度。因此，在使用CSS Max Height时，需要考虑元素的最小高度，避免内容超出最小高度范围。

四、总结

CSS Max Height是一个非常有用的CSS属性，可以用于限制元素的最大高度，避免元素高度超出可视范围。使用CSS Max Height时需要注意需要考虑元素的最小高度、会影响元素的布局、不支持百分比值等特点。