设置GIF背景的页面调整窗口大小时无法滚动该如何解决？

问题原因 #

你的滚动功能异常是因为.main设置了position: absolute，脱离了正常文档流，父元素html和body没有被内容撑开的实际高度，内容溢出时自然无法触发滚动条。直接修改position属性后背景消失，是因为.main的height: 100%依赖父元素的显式高度，去掉绝对定位后父元素没有设置高度，会导致.main高度为0，背景自然不可见。

解决方案 #

方案1（推荐，适配性更强）

无需保留绝对定位，修改样式如下即可保持原有背景效果，同时支持正常滚动：

html, body {
  margin: 0 !important;
  padding: 0 !important;
  /* 给根元素设置基础高度 */
  height: 100%;
}

.main {
  background-image: url("assets/video/background.gif");
  background-size: cover;
  /* 保证背景居中显示，缩放时不变形偏移 */
  background-position: center;
  /* 背景固定，和原absolute定位的显示效果完全一致 */
  background-attachment: fixed;
  width: 100%;
  /* 用min-height替换height，内容超出视口时容器会自动撑开 */
  min-height: 100%;
  /* 删掉position: absolute属性即可 */
}

这个方案符合常规文档流布局逻辑，后续添加其他页面内容的布局适配成本更低。

方案2（无需改动原有定位逻辑）

如果你的页面结构复杂，必须保留.main的absolute定位，只需要补充少量属性即可：

html, body {
  margin: 0 !important;
  padding: 0 !important;
  height: 100%;
  /* 新增，允许内容溢出时出现滚动条 */
  overflow: auto;
}

.main {
  background-image: url("assets/video/background.gif");
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  /* 新增，保证背景定位起点正确 */
  top: 0;
  left: 0;
}

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