html body 不捕获移动分辨率的整个大小

Question

我正在尝试使我的应用程序灵活，我为我的组件使用 100vw 宽度和 100vh 高度，在计算机上的浏览器中，它可以以任何分辨率完美显示。但是当我开始以移动分辨率使用它时，主体在下方绘制了一个空白背景，在图片中我以蓝色背景显示它。告诉我这里可能是什么问题，我该如何解决？谢谢

html, body {
  height: 100%;
}

.page {
  top: 0;
  display: flex;
  flex-direction: row;
  min-width: 100vw;
  min-height: 100vh;
    &_content {
    flex-direction: column;
    width: 100%;
    background-color: #ec7373;
    min-height: 100vh;
  }
}

Answer 1

您可能需要在 .page 类上使用 box-sizing css 属性来定义您的高度和宽度并覆盖可能的填充和边距

像这样：

html, body {
  height: 100%;
}

.page {
  box-sizing : border-box;
  top: 0;
  display: flex;
  flex-direction: row;
  min-width: 100vw;
  min-height: 100vh;
    &_content {
    flex-direction: column;
    width: 100%;
    background-color: #ec7373;
    min-height: 100vh;
  }
}

您可以参考W3C，但请分享 HTML 和 CSS，因为如果无法重现该问题，我们将无能为力。