1. 简介
在网页中，常常需要设置一个框的最大高度，以便在内容过多时出现滚动条。CSS提供了一种设置框最大高度的方法。本文就这个问题进行详细讲解。本文涉及的CSS样式属性有：max-height、overflow、padding。
2. max-height属性
我们可以使用CSS的max-height属性来规定元素的最大高度。如果元素的实际高度大于该属性指定的最大高度，那么该元素将出现滚动条。
下面我们来看一个例子：
div{
max-height: 200px;
overflow: auto;
}
在上面的代码中，我们给<div>元素设置了最大高度为200px，并将溢出内容隐藏，设置了垂直滚动条。
此时，如果<div>元素的实际高度小于或等于200px，那么它的高度将保持不变。如果<div>元素的实际高度大于200px，那么它的高度将被限制为200px，多出的部分将被隐藏，并出现垂直滚动条。
注意：max-height属性不支持百分比值。
3. overflow属性
overflow属性用来定义内容溢出元素框的时候该如何处理。
overflow属性有四种取值：
visible（默认值）：不裁剪内容，会让内容超出元素框的边界。
hidden：裁剪超出元素框的内容。
scroll：溢出元素框时显示滚动条。
auto：如果内容溢出元素框，显示滚动条。
结合max-height属性，我们可以使用overflow属性来控制当元素的实际高度超过最大高度时出现滚动条。下面是一个例子：
div{
max-height: 200px;
overflow: auto;
}
在上面的例子中，我们给元素设置了最大高度为200px，并且指定了溢出部分使用滚动条进行控制。
4. padding属性
padding属性用来定义元素内部的填充，它会影响元素的实际高度。
例如，如果一个元素的height属性的值是100px，padding属性的值是20px，则该元素的实际高度是140px。
但需要注意的是，在计算元素的最大高度（max-height属性）时，不应该将padding值计算在内。也就是说，max-height属性指定的是元素内容的最大高度，不包括padding和border。
下面是一个例子：
div{
max-height: 200px;
padding: 20px;
overflow: auto;
}
在上面的例子中，我们给元素设置了最大高度为200px，并设置了20px的padding。此时，元素的最大高度是指定的内容高度（200px）加上padding值（20px），实际的总高度为220px。如果实际高度超过220px，那么垂直滚动条将出现。