html主体不会捕获移动分辨率的整个大小

Question

我正在努力使我的应用程序变得灵活，我的组件使用100vh宽和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，因为如果不能重现这个问题，我们就无法提供真正的帮助。