移动端如何让investments-footer固定在page footer上方

问题分析 #

当前investments-footer采用position: absolute嵌套在position: relative的investments-root中，但多层嵌套的min-height: 100vh容器导致高度计算混乱，且未关联全局footer的高度，滚动到底部时自然出现空白。之前尝试的bottom: 0仅相对于父容器而非全局footer；-webkit-fill-available会强制拉长内容容器，产生多余空白。

具体修改方案 #

1. 调整investments-footer的定位逻辑

将absolute改为fixed，直接基于视口定位，同时设置bottom值为全局footer高度加底部安全区域，确保始终贴在全局footer上方：

#investments-footer {
  display: flex;
  align-items: flex-end;
  position: fixed; /* 替换原absolute定位 */
  left: 0;
  right: 0;
  z-index: 1000;
  justify-content: center;
  /* 匹配全局footer的min-height，加上底部安全区域适配 */
  bottom: calc(72px + env(safe-area-inset-bottom)); 
}

同时移除内部嵌套的绝对定位，避免冲突：

#if1 {
  z-index: 1000;
  width: 100%;
  /* 移除原position: absolute和bottom: 0 */
}

2. 修复内容容器的高度溢出问题

用flex布局替代多层min-height: 100vh，让内容自动填充可用空间：

• 给#accountPageRoot添加flex属性：

#accountPageRoot {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

• 给包裹content和description的容器设置flex: 1，自动填充剩余空间：

#investments-root > div:first-child {
  flex: 1;
}

3. 优化全局容器的高度设置

确保body和#root的高度逻辑正确，避免滚动异常：

body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

#root {
  flex: 1;
  display: flex;
  flex-direction: column;
}

方案优势 #

• fixed定位脱离父容器限制，精准贴合全局footer位置；
• calc()适配不同设备的底部安全区域，兼顾兼容性；
• flex布局自动分配空间，避免硬编码高度或强制填充导致的多余空白。

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