---

  对于没有系统学习过css的程序员来说，在编写css样式的时候，div的height属性值确实是个玄学的东西，我也感觉css确实挺玄学的，本文将介绍我对div标签height属性的个人理解，如有问题请指正。

---

  在html中，div标签属于行级标签，最明显的特点是占一行，也就是width的值默认是100%，而height的值默认是inherit，并不是100%

---

当父div高度指定时

• 若子div高度不指定，则父div高度是根据子div中内容所需要的高度动态改变的。比如以下代码，在谷歌浏览器中渲染之后，父div高度指定为600px，子div高度动态赋值为21px

<div style="height: 600px;background-color: antiquewhite;">
	<div style="background-color: gray;">
		123
	</div>
</div>

• 若子div高度指定，且高度小于等于父div高度，则正常渲染，内容超出高度时会出现滚动条

• 若子div高度指定，且高度大于父div高度，子div高度超过父div的部分内容会溢出渲染，父div的高度也不会被撑开变大。如果想让子标签超出父div高度的内容隐藏，可以给父div添加overflow-y: hidden;样式

<div style="height: 50px;background-color: antiquewhite;">
	<div style="height: 100px;width: 50%;background-color: gray;"></div>
</div>

• 若想给父div增加内间距之后，剩余高度由子div继承，可以给子div的height值设置成100%，注意：父实际渲染的 height = padding-top + padding-bottom + border-top + border-bottom + 父指定height，并且从dom中获取父div的height，结果是父指定height，而不是实际渲染的height

<div id="demo" style="height: 200px;background-color: antiquewhite;
	padding: 10px 0 10px 0 ;">
	<div style="height: 100%;background: #7bed9f;">
		123
	</div>
</div>

• 若子div存在两个，其中一个div高度指定，剩余的高度全部交给另一个div，可以使用calc()函数计算剩余子div的高度。注意：另一个div的height不能设置成100%，100%的height继承父div的height（200px)，此时这两个div的总height就会超过父height，然后内容溢出

<div id="demo" style="height: 200px;background-color: antiquewhite;padding: 10px 0 10px 0 ;">
	<div style="height: 30px;background: #7bed9f;">
		123
	</div>
	<div style="height: calc(100% - 30px);background: #dfe4ea;">
		456
	</div>
</div>

若父div高度想设置成屏幕高度，可以使用vh单位，vh相对于视口的高度，视口被均分为100单位，设置成height：100vh后，div的高度就是屏幕高度，又因为div的宽度默认时100%，所以此时该div盒子铺满整个屏幕。

当父div高度不指定时

• 若子div高度也不指定，则父div的高度取决于子标签的高度

<div id="demo" style="background-color: antiquewhite;padding: 10px 0 10px 0 ;">
	<div style="background: #7bed9f;">
		123
	</div>
	<div style="background: #7bed9f;">
		123
	</div>
</div>

• 若子div高度指定（非指定百分比），则父div的高度取决于子标签的高度

<div id="demo" style="background-color: antiquewhite;padding: 10px 0 10px 0 ;">
	<div style="height: 40px;background: #7bed9f;">
			123
	</div>
	<div style="height: 40px;background: #7bed9f;">
			123
	</div>
</div>

• 若子div的高度指定为百分比，则height设置无效，因为父div的height没有具体值。

<div id="demo" style="background-color: antiquewhite;padding: 10px 0 10px 0 ;">
	<div style="height: 30%;background: #7bed9f;">
		123
	</div>
	<div style="height: 30%;background: #7bed9f;">
		123
	</div>
</div>

在多级div中，比如一级div设置了具体的height，二级div未设置height，三级div的height的值设置成百分比，该百分比的height也是失效的，符合以上的情况。因为二级div未设置height的具体值，则二级div的高度取决于子标签中的内容所需要的高度，然后三级div在指定百分百高度之后，因为（父）二级div的height没有指定，则百分百height失效。

<div id="demo" style="height: 200px;background-color: antiquewhite;padding: 10px 0 10px 0 ;">
	<div style="background: #7bed9f;">
	  	<div style="height: 50%;background-color: #dfe4ea;">
			123
		</div>
	</div>
</div>