参考链接：CSS 参考手册
CSS 尺寸属性（Dimension）
- height 属性设置元素的高度。
| 值 | 描述 |
|---|---|
| auto | 默认。浏览器会计算出实际的高度。 |
| length | 使用 px、cm 等单位定义高度。 |
| % | 基于包含它的块级对象的百分比高度。 |
| inherit | 规定应该从父元素继承 height 属性的值。 |
实战经验
当height=100%时，这样div元素会和其父div同高。但是如果父DIV是固定高度，父div中还有其他元素。这样这个DIV就会被挤出来。
<!DOCTYPE html>
<html>
<div style="height: 200px;background-color: black; 50%;">
<div style="height: 20px;background-color: blue; 50%;">
gggg
</div>
<div style="height: 100%;background-color: red; 50%;">
gggg
</div>
</div>
</html>
前端页面部分点击插入的时候，避免掉入这样的坑中。