CSS中的height

height用来给块级元素（包括行块级元素）设置高度，行级元素设置高度是不生效的。

auto

height默认为auto。浏览器会计算出实际的高度，也就是自子元素的高度。

百分比

height设置为百分比时，高度基于包含它的块级对象的百分比高度。注意是块级父元素。

示例一

		<div style="height: 200px;background-color: black">
			<div style="height: 50%;background-color: white">
				<div style="display: inline;height: 50%;background-color: aqua">
					<div style="height: 100%;background-color: blue">hello world</div>
				</div>
			</div>
		</div>

包含hello world的div元素的高度是多少呢？
没错是100px。因为第一个父元素是行级元素，对于子元素来说是没有参考的。第二个父元素是块级元素，而且高度是100px。所以hello world的div元素
高度百分比是相对于第二个父元素的。

示例二

		<div style="height: 200px;background-color: black">
			<div style="height: auto;background-color: white">
				<div style="display: inline;height: 50%;background-color: aqua">
					<div style="height: 100%;background-color: blue;line-height: 30px">hello world</div>
				</div>
			</div>
		</div>

该示例中包含hello world的div元素的高度又是多少呢？相对于示例一的区别在于第二个父元素的高度取值auto，也就是自适应。
此时高度为30px，也就是line-height的大小。因为第一个父元素是行级元素，第二个父元素是块级元素，但是高度是auto的。如果高度为auto，浏览器
依据此值计算百分比值时只能得出undefined的值，浏览器对此是不会有任何反应对。所以最终以自身大小为高度。同时第一个和第二个父元素对高度也是
30px，取值为子元素对高度。

示例三

	<body style="width: 200px;height: 200px">
		<div style="position: relative;width: 20%;height: 20%;border: 1px solid black">
			<div style="position: fixed;bottom: 0;left:0;width: 50%;height: 50%;border: 1px solid red">hello world</div>
		</div>
	</body>

该示例中包含hello world的div元素的高度并没有基于父元素div的高度去计算，而是百分比参考屏幕的。所以高度是浏览器屏幕的50%。
那么如何让包含hello world的div元素的高度是父元素的高度呢（这里是高度等于父元素的高度）？

	<body style="width: 200px;height: 200px">
		<div style="position: relative;width: 20%;height: 100px;border: 1px solid black">
			<div style="position: fixed;bottom: 0;left:0;width: 50%;height: inherit;border: 1px solid red">hello world</div>
		</div>
	</body>

在代码中可以看到父元素高度是固定值，而且子元素fixed元素的高度取值inherit。这样子元素就可以直接继承父元素的高度了。如果父元素的高度也是百分比，
那么就需要通过js代码的方式来实现了。