清晰设计网格

Question

当我在浏览器（例如 Firefox：iphone X）的响应视图中进行开发时，一切都非常适合，但是当我切换到 iphone X 浏览器（Safari 或 Chrome) 内容在浏览器底部菜单后面，我需要滚动才能看到内容。

Grid 没有考虑视口大小减去浏览器底部菜单大小吗？

有什么克服这个问题的提示吗？

提前致谢。

Answer 1

我设法找到了解决方法，虽然不是理想的解决方案，但解决了问题。

在移动环境中，让固定底部菜单始终可见的挑战是 .main-container 包装器中的 属性 height: 100vh。那么解决方法是什么？

已在styles.css中添加以定义参考高度height: 100%

html, body {
  height: 100%;
}

并在 app.component.css

.main-coontainer {
  height: 100% !important;
}

...完成了。请参阅 stackblitz.com/edit/clarity-design-grid-responsive.

中的示例