如何动态适配页面内容使其不被底部固定容器遮挡？

不需要硬编码边距，也不需要写多套媒体查询，以下两种方案都可以实现自适应效果，优先选择纯CSS方案。

方案1：纯CSS实现（最优，零JS依赖） #

核心是把底部栏的fixed定位替换为sticky定位，配合flex布局保证内容不足一屏时底部栏也能贴底，底部栏本身处于正常文档流中会自动占位，从根源上避免遮挡问题。
直接替换原有CSS代码即可：

p {
  font-size: 6rem;
}

/* 外层包裹容器 */
body > div {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1; /* 内容区自动填充剩余高度 */
}

.bottom-content {
  position: sticky; /* 替换原fixed定位 */
  bottom: 0;
  background-color: green;
  /* 可选：适配移动端底部安全区 */
  padding-bottom: env(safe-area-inset-bottom);
}

button {
  width: 250px;
  height: 250px;
}

• 自动适配所有场景：不管窗口缩放导致底部按钮换行变高、还是后续动态增删底部栏内容，浏览器都会自动计算占位高度，上方内容永远不会被遮挡。
• 兼容所有现代浏览器，移动端适配效果好。

方案2：JS动态计算边距（适合必须保留fixed定位的场景） #

如果业务要求必须使用position: fixed，可以通过少量JS实时获取底部栏的实际高度，自动给内容区设置对应下边距，监听窗口变化自动更新。
保留原有CSS的fixed定位，删掉硬编码的margin-bottom: 500px，加入以下JS代码：

const contentEl = document.querySelector('.content');
const bottomBarEl = document.querySelector('.bottom-content');

function adjustContentPadding() {
  const barHeight = bottomBarEl.offsetHeight;
  contentEl.style.marginBottom = `${barHeight}px`;
}

// 页面初始化时执行
adjustContentPadding();
// 窗口尺寸变化时自动重新计算
window.addEventListener('resize', adjustContentPadding);
// 如果底部栏存在动态加载/修改内容的场景，在内容更新后调用adjustContentPadding即可

• 适配精度和纯CSS方案一致，兼容到IE9及以上版本。

媒体查询方案不推荐：需要逐个枚举断点下的底部栏高度，后续修改底部栏内容时还要同步修改所有断点的数值，维护成本极高，很容易出现遮挡bug。

内容的提问来源于stack exchange，提问作者sir-haver