如何隐藏超出页面末端的绝对定位div，使页面高度跟随实际内容结束

解决方案 #

方案1：给内容外层加定位容器（最推荐，无副作用） #

你之前overflow: hidden不生效的核心原因是：绝对定位元素脱离了常规文档流，只有它的最近设置了非static定位、且overflow不为visible的祖先元素才能裁剪它的溢出部分。
操作步骤：

1. 把所有页面正常内容，和这些绝对定位的图片div，全部套在一个外层容器里：

<div class="content-wrapper">
  <!-- 这里放你的所有正常页面内容 -->
  <div class="img1"><img src="img.png"></div>
  <div class="img2"><img src="img.png"></div>
</div>

2. 给外层容器加对应CSS：

.content-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* 容器高度由内部正常内容自动撑开，不需要手动设置 */
}

这个方案下，容器的高度只会计算内部正常流内容的高度，绝对定位的图片超出容器高度的部分会被直接裁剪，不会撑出页面滚动条。 #

方案2：强制限制页面根元素高度 #

如果不想改动HTML结构，可以直接给根元素设置规则：

html, body {
  position: relative;
  overflow-x: hidden;
  height: fit-content;
}

注意这个方案如果页面内部有其他需要超出滚动的组件，可能会受影响。 #

方案3：JS动态设置页面高度（适配动态内容场景） #

如果你的页面内容是动态加载的，可以用JS获取正常内容的实际高度，手动设置body的最大高度：

// 假设你的正常内容包裹在.content容器里
const contentHeight = document.querySelector('.content').offsetHeight;
document.body.style.maxHeight = `${contentHeight}px`;
document.body.style.overflowY = 'auto';

问题示例 #

#

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