Question

好的，我会尽力解释我想要实现的目标，因为我不允许在堆栈上添加图像，所以这里是：

我有平板电脑的设计。整个内容占据了设计的100％高度，顶部和底部只有15px的填充。

所以，我必须使设计适合市场上的所有应用程序，而不需要垂直滚动。

我尝试了许多解决方案，比如使用bootstrap和

HTML

<html>
<body>
<div class="main-content">
</div>
</body>
</html>

CSS

html, body, main-content {
height:100%;
overflow:hidden;
}

另外，我尝试使用媒体查询缩小页面中元素的大小，以便垂直适合不同平板电脑的屏幕。

问题是，设计中有80个页面，我相信这不是这个页面数量的最佳解决方案，也不是为每个页面添加媒体查询。（页面设计彼此不同，因此不能使用常见的类）

想知道是否有任何其他解决方案适合没有滚动的平板电脑的页面高度。

任何帮助，建议将不胜感激。

Answer 1

试试这个，

html, body, main-content {
    height:100vh;
    overflow:hidden;
}