- CSS 教程
- CSS - 教程
- CSS - 简介
- CSS - 语法
- CSS - 选择器
- CSS - 包含
- CSS - 度量单位
- CSS - 颜色
- CSS - 背景
- CSS - 字体
- CSS - 文本
- CSS - 图像
- CSS - 链接
- CSS - 表格
- CSS - 边框
- CSS - border-block 属性
- CSS - 边框内联
- CSS - 边距
- CSS - 列表
- CSS - Padding 属性
- CSS - 光标
- CSS - 轮廓
- CSS - 维度
- CSS - 滚动条
- CSS - 内联块
- CSS - 下拉列表
- CSS - visibility 属性
- CSS - Overflow 属性
- CSS - 清除修复
- CSS - float(浮点)
- CSS - 箭头
- CSS - resize 属性
- CSS - quotes 属性
- CSS - order 属性
- CSS - Position 属性
- CSS - hypens 属性
- CSS - :hover(悬停)
- CSS - display(显示)
- CSS - focus 属性
- CSS - zoom(缩放)
- CSS - translate 属性
- CSS - Height 属性
- CSS - hyphenate-character 属性
- CSS - Width 属性
- CSS - opacity 属性
- CSS - z-index 属性
- CSS - bottom 属性
- CSS - 导航栏
- CSS - 覆盖
- CSS - 表单
- CSS - 对齐
- CSS - 图标
- CSS - 图片库
- CSS - 注释
- CSS - 加载器
- CSS - Atrribute 选择器属性
- CSS - 运算器
- CSS - root
- CSS - 盒子模型
- CSS - 计数器
- CSS - Clip (Obsolete) 属性
- CSS - writing-mode 属性
- CSS - Unicode-bidi 属性
- CSS - min-content 属性
- CSS - 全部
- CSS - inset 属性
- CSS - isolation 属性
- CSS - overscroll-behavior 属性
- CSS - justify-items 属性
- CSS - justify-self 属性
- CSS - tab-size 属性
- CSS - pointer-event 属性
- CSS - place-content 属性
- CSS - place-items 属性
- CSS - place-self 属性
- CSS - max-block-size 属性
- CSS - min-block-size 属性
- CSS - mix-blend-mode 属性
- CSS - max-inline-size 属性
- CSS - min-inline-size 属性
- CSS - offset 属性
- CSS - accent-color 属性
- CSS - user-select 属性
- CSS 高级
- CSS - grid 属性
- CSS - Grid 布局
- CSS - flexbox
- CSS - vertical-align 属性
- css - positioning
- css - layers
- css - pseudo_classes
- CSS - 伪元素
- CSS - @ 规则
- CSS 滤镜 - text-effect 属性
- CSS 分页媒体
- CSS 打印
- CSS - 布局
- CSS - 验证
- CSS - 图像精灵
- CSS - !important
- CSS - 数据类型
- CSS3 教程
- CSS - 圆角
- CSS - 边框图像
- CSS - 多种背景
- CSS - 渐变
- CSS - box-shadow 属性
- CSS - box-decoration-break 属性
- CSS - caret-color 属性
- CSS - text-shadow 属性
- CSS - 2D 转换
- CSS - 3D 变换
- CSS - transition 属性
- CSS - 动画
- CSS - 多列布局
- CSS - 盒子大小调整
- CSS - 工具提示
- CSS - buttons
- CSS - 分页
- CSS - 变量
- CSS - 媒体查询
- CSS - 值函数
- CSS - 数学函数
- CSS - Mask 属性
- CSS - shape-outside 属性
- CSS - 样式图像
- CSS - 特异性
- CSS - 自定义属性
- CSS 响应式
- CSS - 响应式网页设计 (RWD)
- CSS - 响应式设计视口
- CSS - 响应式网格视图
- CSS - 响应式媒体查询
- CSS - 响应式图像
- CSS - 响应式视频
- CSS - 响应式框架
- CSS 引用
- CSS - 所有属性列表
- CSS - 颜色引用
- CSS - 浏览器支持参考
- CSS - 网页字体
- CSS 工具
- CSS - PX 到 EM 的转换
CSS - max-height 属性
CSS max-height 属性用于设置元素高度的上限。
可能的值
- none − 元素的高度没有限制。
- <length> − 任何长度单位。元素的高度值永远不能超过此距离。
- <percentage> - 将元素的高度限制为最多为包含块高度的此百分比。
- initial − 将 max-height 的值设置为默认值。
- inherit − max-height 的值继承自其父值。
适用于
所有 HTML 元素,但未替换的内联元素和表格元素除外。
DOM 语法
object.style.maxHeight = "50px"
CSS max-height - <length> 值
以下示例演示了 max-height: 40px 属性将元素的最大高度设置为 40px −
<html>
<head>
<style>
p {
width:400px;
max-height:40px;
border:2px solid red;
padding:5px;
margin:10px;
}
</style>
</head>
<body>
<p>
This paragraph is 400px wide and maximum height is 40px.
Hence the border is not covering the entire text and
there is some part of text outside the border. This is
due to the max-height value set for p tag.
</p>
</body>
</html>
CSS max-height - <percentage>值
这是另一个示例,演示了 max-height 中所有值的使用 -
<html>
<head>
<style>
div.a {
max-height: 100px;
width: 80%;
overflow: auto;
}
div.b {
max-height: 70%;
width: 80%;
overflow: auto;
}
div.c {
max-height: inherit;
width: 80%;
overflow: auto;
}
div.d {
max-height: none;
width: 80%;
overflow: auto;
}
</style>
</head>
<body>
<div class="a">
<h2>max-height: 100px and width:80%</h2>
<p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is 100px.</p>
</div>
<div class="b">
<h2>max-height: 70% and width:80%</h2>
<p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is 70%.</p>
</div>
<div class="c">
<h2>max-height: inherit and width:80%</h2>
<p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is inherit.</p>
</div>
<div class="d">
<h2>max-height: none and width:80%</h2>
<p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is none.</p>
</div>
</body>
</html>