在CSS中，height: 100% 的用法是希望某个元素的高度能够占据其父元素高度的100%。然而，要使 height: 100% 能够正常工作，有一些前提条件需要满足：
- 父元素的高度必须被定义：如果父元素的高度没有被明确设置（例如，它默认为
auto），那么子元素的height: 100%将不会按预期工作。你需要确保父元素有一个具体的高度值（如px、em、rem、vh等）或百分比高度（但请注意，这将再次依赖于其父元素的高度）。 - 在HTML文档流中：
height: 100%主要在HTML文档流中的块级元素上有效。如果你尝试在一个非块级元素（如inline或inline-block）上使用它，可能不会得到预期的结果。 - 考虑padding和border：默认情况下，
height: 100%会考虑子元素的padding，但不会考虑border和margin。如果你希望包括border和padding在内的高度为100%，你可能需要使用box-sizing: border-box;。 - 在绝对定位或固定定位的元素中：如果你在一个绝对定位（
position: absolute;）或固定定位（position: fixed;）的元素上使用height: 100%，那么这个百分比会基于最近的已定位祖先元素（即设置了position属性且值不是static的元素）的高度。如果没有这样的祖先元素，那么它会基于初始包含块（通常是视口）的高度。
示例：
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<style> | |
html, body { | |
height: 100%; | |
margin: 0; | |
} | |
.container { | |
height: 100%; | |
background-color: lightblue; | |
} | |
.inner { | |
height: 100%; | |
background-color: lightgreen; | |
box-sizing: border-box; | |
padding: 20px; | |
border: 1px solid black; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="inner"> | |
This div will be 100% height of its parent container. | |
</div> | |
</div> | |
</body> | |
</html> |
在上面的示例中，.container 和 .inner 的高度都设置为 100%，并且由于 html 和 body 的高度也被设置为 100%，所以 .inner 的高度实际上会占据整个视口的高度。