max-height
是CSS中的一个属性,用于设置元素的最大高度。当元素的内容高度超过这个值时,元素的高度会被限制为 max-height
指定的值,而不会出现滚动条。
max-height
属性定义了元素的最大高度,可以是具体数值(如像素px)、百分比(相对于包含块的宽度)、视口单位(vw, vh)等。max-height
不具有继承性,即子元素不会继承父元素的 max-height
值。max-height: 200px;
max-height: 50%;
max-height: 50vh;
max-height
后,元素仍然溢出。position: absolute;
)导致布局计算出现问题。max-height
表现不一致。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Max Height Example</title>
<style>
.box {
width: 200px;
max-height: 100px;
background-color: lightblue;
overflow-y: auto; /* 当内容超出时显示滚动条 */
}
.content {
height: 200px; /* 超过max-height的值 */
}
</style>
</head>
<body>
<div class="box">
<div class="content">
This is some text that will cause the box to exceed its max-height and thus show a scrollbar.
</div>
</div>
</body>
</html>
在这个示例中,.box
元素设置了 max-height
为 100px
,当 .content
的高度超过这个值时,会出现垂直滚动条。
没有搜到相关的沙龙