css怎样设置div的最大高度

发布时间:2022-05-17 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了css怎样设置div的最大高度脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

在css中,可以利用max-height属性来设置div的最大高度,该属性的作用就是设置元素的最大高度,只需要给div元素添加“div{max-height:最大高度值;}”样式即可。

css怎样设置div的最大高度

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3脑。

在css中,可以利用Max-height属性来设置div的最大高度。

max-height 属性设置元素的最大高度。注意: max-height属性不包括填充,边框,或页边距

示例:

<!DOCTYPE html>
<html>
	<head>
		<style>
			div{
				border: 1px solid red;
				margin-bottom: 20px;
			}
			.box1{
				overflow: hidden;
			}
			.box2{
				max-height: 50px;
				overflow: hidden;
			}
		</style>
	</head>

	<body>
		<div class="box1">
			测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,
			测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,
			测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,
			测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,</div>
		<div class="box2">
			测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,
			测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,
			测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,
			测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,</div>
	</body>
</html>

效果图:

css怎样设置div的最大高度

可以看出,div.box1元素的高度是随着元素内容高度变化的;而div.box2元素在最大高度不超过50px时,也是随着元素内容高度变化的,但一旦超过,就不会变化,超过的元素会被隐藏。

(学习视频分享:css视频教程)

以上就是css怎样设置div的最大高度的详细内容,更多请关注脚本宝典其它相关文章

脚本宝典总结

以上是脚本宝典为你收集整理的css怎样设置div的最大高度全部内容,希望文章能够帮你解决css怎样设置div的最大高度所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:div