一、介绍
在CSS中，我们使用div来创建网页的布局，有时需要设置它的最大高度以避免内容溢出。本文将详细介绍如何设置div的最大高度。
二、使用max-height设置最大高度
div {
max-height: 300px;
}
可以使用CSS属性max-height来设置div的最大高度。这个属性限制了元素的高度，使其不能超过指定的值。如果设置了height属性，max-height属性将覆盖其值。
例如，将max-height设置为300px，当内容不足以填满div时，div高度将自动调整为内容的高度。但当内容大于300px时，div的高度不会超过300px。
1. 控制超出部分的显示样式
使用max-height属性可能导致div内容的溢出，并且导致滚动条的出现。通过使用overflow属性，可以控制溢出部分的显示方式。
div {
max-height: 300px;
overflow: auto; /* 显示滚动条 */
}
上述代码使div在内容超过最大高度时显示滚动条。可以使用其他的overflow属性值来控制如何显示溢出内容。
2. 与高度百分比一起使用
max-height属性只控制元素的最大高度，想要元素的高度随着窗口大小调整而调整，同时限制最大高度，可以与height属性使用百分比。
div {
height: 50%;
max-height: 300px;
}
上述代码使div的高度为浏览器窗口高度的50%，并且限制了最大高度为300px。
3. 与media query结合使用
使用max-height属性还可以通过media query结合使用，以便让页面在不同设备上更好地适应。
@media (max-height: 500px) {
div {
max-height: 200px;
}
}
上述代码在浏览器高度不超过500px时，将div的最大高度设置为200px。
三、总结
使用max-height属性可以很方便的限制div的最大高度，避免内容溢出。同时，与其他CSS属性和media query结合使用，可以让页面更好的适应不同的设备和浏览器大小。