移动端绝对定位元素高度超出父容器，如何让overlay固定底部且内容完整显示

推荐纯CSS方案（无需JS、兼容性好） #

直接用Flex布局替代绝对定位即可同时满足「overlay贴在父容器底部」和「父容器高度随overlay内容自动撑开」两个需求，核心逻辑是让overlay回归正常文档流，通过margin自动占位实现贴底效果：
修改后的CSS代码如下：

html,
body {
  margin: 0;
  height: 100%;
}

* {
  box-sizing: border-box;
}

.parent {
  /* 新增flex相关配置 */
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 100vh;
  background-image: url(http://placehold.it/1000);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.overlay {
  background: #376c8d;
  /* 删掉原来的绝对定位相关属性 */
  /* position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); */
  /* 新增贴底+居中配置 */
  margin-top: auto;
  margin-inline: auto;
  /* 原有属性保留 */
  width: 90%; /* 可以根据需求调整宽度 */
  text-align: center;
  padding: 30px 20px;
  border-radius: 160px 160px 0 0;
  font-size: 24px;
  opacity: 0.8;
}

这个方案的优势：

• 完全不需要JS计算，窗口大小变化、overlay内容动态更新时都会自动适配
• 兼容所有现代浏览器，IE11也能支持
• 背景图会随父容器高度自动延伸，不会出现overlay溢出的问题

必须保留absolute定位的兼容方案 #

如果业务场景强制要求overlay使用absolute定位，可以通过新增占位DOM节点的方式实现：

1. 在父容器内新增和.overlay完全一样的占位元素，加上类名.overlay-placeholder
2. 给占位元素设置visibility: hidden;，其他样式和.overlay完全一致
3. 占位元素会正常撑开父容器高度，绝对定位的overlay就不会超出父容器范围

原JS方案的缺陷：仅在页面加载时计算一次高度，窗口resize、overlay内容动态变化时都会出现计算错误，不推荐使用。

内容的提问来源于stack exchange，提问作者user_411