如何创建任意尺寸下支持无限滚动的全屏HTML页面？height:100%无效怎么办

CSS中百分比高度的计算依赖父元素的明确高度值，你只给目标元素设置height: 100%时，它的祖先元素（包括<html>、<body>）没有设置对应高度的话，这个百分比就没有计算基准，浏览器会默认按照内容实际高度渲染，自然无法达到全屏效果。另外<body>等元素默认自带的外边距也会干扰高度计算，导致样式不符合预期。

1. 基础样式重置 #

先统一全局基础样式，消除默认样式干扰：

* {
  margin: 0;
  padding: 0;
  /* 内边距和边框不会撑大元素尺寸 */
  box-sizing: border-box;
}

html, body {
  /* 给根元素设置高度基准，兼容旧浏览器 */
  height: 100%;
  /* 禁止横向滚动 */
  overflow-x: hidden;
}

2. 滚动容器配置 #

如果你用独立容器承载无限滚动的内容，推荐使用视口单位vh做高度适配，不需要依赖父元素高度：

.scroll-wrapper {
  /* 最小高度撑满整个视口，内容超出时自动撑开高度 */
  min-height: 100vh;
  width: 100%;
  /* 如果需要容器内部滚动而非页面全局滚动，换成下面两行 */
  /* height: 100vh;
  overflow-y: auto; */
}

100vh代表当前视口高度的100%，适配所有屏幕尺寸，比百分比高度写法更简洁，移动端兼容性也足够。

3. 无限滚动逻辑适配 #

不管用原生JS还是第三方框架实现无限加载，只要满足两个条件就能适配任意尺寸：

• 滚动监听对象匹配场景：全局滚动监听window的scroll事件，容器内滚动监听对应容器的scroll事件
• 加载触发阈值不要写死固定px值，优先用相对单位，或者动态计算当前视口的对应比例值，避免小屏不触发、大屏触发过早的问题。

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