uni-app中如何让页面背景色铺满整个屏幕？

Designer°佳润提问于 2026-03-21 09:47:16 阅读 11

框架

我在uni-app里写了个登录页，想把背景色设成浅蓝色，但发现只覆盖了内容区域，底部有一截白边，特别是在iPhone X这类有安全区的机型上特别明显。我试过给page和view都加背景色，也用了height: 100vh，但还是不行。

这是我的CSS代码：

page {
  background-color: #e6f7ff;
  height: 100%;
}

.login-container {
  height: 100vh;
  background-color: #e6f7ff;
}

是不是哪里没考虑到安全区或者根元素的问题？求指点！

我来解答赞 2 收藏

反馈

1 条解答

Mc.利君 Lv1

在uni-app里处理全屏背景色的问题，特别是针对iPhone X这类有安全区的设备，确实有点棘手。你提到的height: 100vh有时候会因为地址栏的动态变化而失效。为了解决这个问题，你可以尝试使用视口单位vmax来设置高度，确保背景色能够铺满整个屏幕。同时，为了更好地处理安全区的问题，可以使用padding或者margin来自适应。

你可以试试这样修改你的CSS代码：

page {

  background-color: #e6f7ff;

  height: 100vh; /* 保持原有的设置 */

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  padding-bottom: constant(safe-area-inset-bottom); /* 兼容旧版本iOS */

  padding-bottom: env(safe-area-inset-bottom); /* 兼容新版本iOS */

}



.login-container {

  width: 100%;

  min-height: 100vh; /* 使用min-height来确保至少填满整个视口 */

  background-color: #e6f7ff;

  box-sizing: border-box; /* 确保内边距不会影响高度计算 */

}

这里的关键点在于使用constant(safe-area-inset-bottom)和env(safe-area-inset-bottom)来处理安全区的问题，这样可以确保背景色不会被底部的刘海遮挡。同时，将min-height设置为100vh，并配合box-sizing: border-box，可以更好地控制布局，避免出现意外的空白区域。

希望这个方法能帮到你，解决背景色铺不满屏幕的问题。如果还有其他问题，随时可以问我。

2026-03-21 10:07