移动端页面不满一屏时如何实现满屏背景？

移动端页面不满一屏时，实现满屏背景的方法有很多，以下是几种常见且有效的方案：

1. 使用min-height: 100vh:

这是最简单直接的方法。vh是视口高度（Viewport Height）的单位，100vh代表浏览器窗口的可见高度。将min-height设置为100vh，即使内容不足以填满屏幕，背景也会延伸到整个视口高度。

body {
  min-height: 100vh;
  background-color: #f0f0f0; /* 或使用背景图片 */
  background-size: cover; /* 可选，根据需要设置背景图片大小 */
  background-position: center; /* 可选，根据需要设置背景图片位置 */
}

2. 使用 Flexbox 布局:

Flexbox 可以轻松实现垂直方向的拉伸。将body设置为display: flex，并使用flex-grow: 1让内容区域填充剩余空间。

body {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  min-height: 100vh;
  background-color: #f0f0f0;
}

main { /* 或其他内容容器 */
  flex-grow: 1; 
}

3. 使用 Grid 布局:

Grid 布局也能实现类似的效果。

body {
  display: grid;
  min-height: 100vh;
  grid-template-rows: 1fr; /* 使用 fr 单位让内容区域填充剩余空间 */
  background-color: #f0f0f0;
}

main { /* 或其他内容容器 */
  /*  不需要额外的样式，会自动填充 */
}

4. 使用 JavaScript (较少推荐，除非其他方法无法满足需求):

可以通过 JavaScript 动态计算视口高度，并设置背景元素的高度。这种方法相对复杂，且性能开销略大，一般情况下不推荐使用。

function setBackgroundHeight() {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

window.addEventListener('resize', setBackgroundHeight);
setBackgroundHeight();

// CSS
body {
  min-height: calc(var(--vh, 1vh) * 100);
  background-color: #f0f0f0;
}

选择哪种方法？

• 大多数情况下，min-height: 100vh 足够简洁有效。
• 如果页面结构较为复杂，需要更灵活的布局控制，可以考虑 Flexbox 或 Grid。
• 尽量避免使用 JavaScript，除非其他方法无法满足特殊需求。

补充说明:

• 如果使用背景图片，建议同时设置 background-size (例如 cover 或 contain) 和 background-position，以获得最佳的显示效果。
• 确保背景元素的层级足够低，以免遮挡页面内容。

希望以上信息能帮到你! 请根据你的具体情况选择最合适的方法。