平板电脑的全高页面,无垂直滚动,可在一个屏幕中容纳内容



好的,我会尽力解释我试图实现的目标,因为我不允许在堆栈上添加图像,所以它是:

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

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

我尝试过很多解决方案,比如使用引导

HTML

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

CSS

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

此外,我还尝试过使用媒体查询来缩小页面中元素的大小,只是为了垂直适应不同平板电脑的屏幕。

问题是,设计中大约有80个页面,我认为这不是针对这么多页面并为每个页面添加媒体查询的最佳解决方案。(页面设计彼此不同,因此不能使用通用类)

我想知道有没有其他解决方案来适应没有滚动的平板电脑的页面高度。

如有任何帮助和建议,我们将不胜感激。

试试这个,

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

最新更新