css如何让height:100%起作用？

要让 CSS 中的 height: 100% 生效，其父元素必须有一个明确的高度。 如果父元素的高度没有设置，或者设置为 auto，那么 height: 100% 将无法计算出具体的像素值，因此不起作用。

以下是几种让 height: 100% 生效的方法：

1. 设置父元素的高度： 这是最常见也是最直接的方法。 可以为父元素设置一个固定的像素高度（例如 height: 500px），或者使用其他相对单位，例如视口单位（vh）。 例如，height: 100vh 会使元素的高度占据整个浏览器窗口的高度。

2. 从 html 和 body 开始设置高度： 如果想要元素占据整个页面高度，需要从 html 和 body 元素开始设置高度。 需要将 html 和 body 的高度都设置为 100%，这样才能让子元素的 height: 100% 正确计算。 示例如下：

html, body {
  height: 100%;
  margin: 0; /* 去除默认外边距 */
}

.container {
  height: 100%;
}

3. 使用绝对定位： 如果父元素的高度难以确定，可以使用绝对定位。 将父元素设置为 position: relative，子元素设置为 position: absolute，并设置 top: 0; bottom: 0;，这样子元素就会填满父元素的高度。 示例如下：

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0; /* 可选，如果需要宽度也占满 */
  right: 0; /* 可选，如果需要宽度也占满 */
  height: 100%;
}

4. 使用 Flexbox 布局： Flexbox 布局提供了一种更灵活的方式来控制元素的高度。 将父元素设置为 display: flex，并设置 align-items: stretch，子元素会自动拉伸以填满父元素的高度。 如果需要子元素占据整个父元素的高度，可以设置 flex-grow: 1。 示例如下：

.parent {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: stretch; /* 拉伸子元素 */
  height: 300px; /* 父元素高度 */
}

.child {
  /* height: 100%;  不需要显式设置 */
}

5. 使用 Grid 布局： Grid 布局也提供了一种类似 Flexbox 的方式来控制元素的高度。 可以将父元素设置为 display: grid，并使用 grid-template-rows 属性来定义行的高度。 如果需要子元素占据整个父元素的高度，可以使用 fr 单位。 示例如下：

.parent {
  display: grid;
  grid-template-rows: 1fr; /* 一行，占据整个父元素高度 */
  height: 300px; /* 父元素高度 */
}

.child {
  /* height: 100%;  不需要显式设置 */
}

选择哪种方法取决于具体的布局需求。 在大多数情况下，设置父元素的高度或使用 Flexbox/Grid 布局是最常用的方法。 记住，关键在于确保 height: 100% 的父元素有一个明确的高度。