父亲div的高度随子div高度变化关系

最新推荐文章于 2023-04-17 14:40:08 发布

原创最新推荐文章于 2023-04-17 14:40:08 发布 · 2.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css和div父类子类高度变化

网页设计与制作专栏收录该内容

1 篇文章

订阅专栏

本文探讨了三种不同情况下，父div高度如何随子div高度变化：1) 父div未设置高度，浮动子div设置高度，需通过`overflow: hidden;`使父div高度与子div匹配；2) 父类未设置高度，不浮动子类div设置高度，父类高度自动与子类div高度一致；3) 父类设置固定高度，子类div设置高度，父类高度不再随子类div变化。

情况一：父div未设置高度浮动子div设置高度

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>父亲div的高度随子div高度变化关系</title>
	<style type="text/css">
		#main{width: 300px;background: red; }
		#son1{width:100px; float: left;}
		#son2{width: 200px;  float: left;}
	</style>
</head>
<body>
	<div id="main">
		<div id="son1">块1</div>
		<div id="son2">快2</div>
	</div>
</body>
</html>

说明：其中我在main中没有设置高度，却设置了背景颜色，而子类div均没有，这样有利于观察main也就是父类div 的具体高度情况

如图所示：好像什么都没有（其实是因为没有设置子类的背景颜色）

下面看当加一句话，在#main{overflow: hidden;},情况如图：，其中的红色高度就是父亲div的高度

总结：当父div没有设置高度，浮动子类div 是有高度的时候，父类高度不会随着子类高度而变化。只有加入overflow: hidden;一句话才会和浮动子类div高度齐平

情况二：父类未设置高度，不浮动子类div设置高度

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>父亲div的高度随子div高度变化关系</title>
	<style type="text/css">
		#main{ width: 300px;background: red; }
		#son1{width:100px; background: blue;height:20px; }
		#son2{width: 200px; background: yellow; height:20px;}
	</style>
</head>
<body>
	<div id="main">
		<div id="son1">块1</div>
		<div id="son2">快2</div>
	</div>
</body>
</html>

结果如图：，说明没有设置父类div高度却显示有高度，和子类一样高

总结：父类未设置高度，不浮动子类div设置高度的时候，父类的高度会自己和子类div总高度齐平，也就是自己会调整

情况三：父类设置高度，不浮动子类div也设置高度

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>父亲div的高度随子div高度变化关系</title>
	<style type="text/css">
		#main{ height:25px; width: 300px;background: red; }
		#son1{height:20px; width:100px; background: blue; }
		#son2{height:20px;   width: 200px; background: yellow; }
	</style>
</head>
<body>
	<div id="main">
		<div id="son1">块1</div>
		<div id="son2">快2</div>
	</div>
</body>
</html>

结果如图：