如何在移动端实现div sticky定位底部且不重叠上层内容？

你现有代码的核心问题是.container设置了固定高度height: 100vh，当上层内容高度超过100vh时，容器高度不会随之撑开，position: sticky的底部元素只会固定在容器的底部（也就是视口底部），自然会和超出容器高度的内容重叠。

以下是两种适配安卓Chrome、iOS Safari的解决方案，可根据你的实际需求选择：

方案1：底部元素跟随页面滚动 #

实现效果：内容不足时贴视口底部，内容过长时贴整个页面的最底部，需要滚动到页面末尾才能看到，完全符合你描述的「始终处于页面垂直方向最底部」的要求：

<style>
/* 先统一全局默认边距，避免浏览器默认样式干扰高度计算 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  /* 用min-height保证容器最少占满一屏，内容超出时自动撑开高度 */
  min-height: 100vh;
  /* 兼容iOS Safari工具栏、地址栏占用视口高度的问题 */
  min-height: -webkit-fill-available;
  width: 100vw;
  display: flex;
  flex-direction: column;
}
/* 上层内容单独包裹一层容器 */
.page-content {
  /* 自动占满容器除底部元素外的所有剩余空间，把底部元素顶到最下方 */
  flex: 1;
}
.bottom-element {
  /* 不需要sticky定位，会自动排在容器末尾 */
  height: 60px; /* 替换为你的底部元素实际高度 */
}
</style>
<div class="container">
  <div class="page-content">
    <!-- 此处放置高度不固定的静态定位子元素 -->
  </div>
  <div class="bottom-element"></div>
</div>

方案2：底部元素固定在视口底部 #

实现效果：底部元素始终悬浮在视口底部不随滚动消失，同时不会遮挡上层内容：

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 100vw;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  /* 给底部元素预留对应高度的空间，避免上层内容被遮挡 */
  padding-bottom: 60px; /* 数值和底部元素高度保持一致 */
}
.bottom-element {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px; /* 替换为你的底部元素实际高度 */
}
</style>
<div class="container">
  <!-- 此处放置高度不固定的静态定位子元素 -->
  <div class="bottom-element"></div>
</div>

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