如何将可滚动scrollable-div的高度设为100%高度父容器的百分比？

好问题！要让你的.scrollable-div基于父容器的百分比自适应高度，核心是要理解CSS中百分比高度的工作机制——它依赖于父元素有明确的高度上下文，不然百分比值会被浏览器忽略，最终表现为height: auto。下面分两种常见场景给出解决方案：

场景1：直接使用百分比高度 #

这种方式适用于你明确需要子容器占父容器固定百分比高度的情况，步骤如下：

1. 建立完整的高度链
   首先要确保从根元素（html、body）到父容器都有明确的高度设置，因为默认情况下html和body的高度是由内容撑开的，不是视口高度。

2. 修改.scrollable-div的高度属性
   把原来固定的max-height: 49em替换为百分比值，比如要占父容器的80%高度，就设height: 80%或max-height: 80%（根据需求选择，height是强制高度，max-height是最大限制）。

完整代码示例：

/* 确保根元素有高度上下文 */
html, body {
  height: 100%;
  margin: 0; /* 移除默认边距，避免不必要的滚动条 */
}

/* 你的父容器，设置明确的100%高度 */
.parent-container {
  height: 100%;
  border: 1px solid #ddd; /* 仅用于可视化容器范围，可删除 */
}

.scrollable-div {
  display: flex;
  flex-direction: column;
  overflow-y: scroll; /* 保留垂直滚动，overflow:auto可以去掉，因为已指定y轴滚动 */
  width: 100%;
  height: 80%; /* 这里设置为父容器高度的80%，可按需调整 */
}

场景2：Flex布局下的自适应（更灵活） #

如果你的父容器本身是Flex容器，用flex: 1来让.scrollable-div自动占满父容器的剩余空间会更灵活，尤其适合父容器还有其他子元素（比如头部、底部）的场景：

/* 根元素高度链依然需要 */
html, body {
  height: 100%;
  margin: 0;
}

.parent-container {
  display: flex;
  flex-direction: column; /* 和子容器的flex方向保持一致，按需调整 */
  height: 100%;
}

.scrollable-div {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  width: 100%;
  flex: 1; /* 自动占满父容器的剩余可用空间 */
}

关键注意事项 #

• 父容器的height: 100%必须有效：如果父容器的父级没有明确高度，那它的height: 100%会失效，子元素的百分比高度自然也不生效。
• 避免嵌套Flex布局的冲突：如果父容器和子容器都是Flex，确保flex-direction符合你的布局需求，必要时调整flex-shrink、flex-grow属性。

内容的提问来源于stack exchange，提问作者Program-Me-Rev