移动端页面不满一屏时，实现满屏背景的方法有很多，以下是几种常见且有效的方案：
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，以获得最佳的显示效果。 - 确保背景元素的层级足够低，以免遮挡页面内容。
希望以上信息能帮到你! 请根据你的具体情况选择最合适的方法。
