Ясность Дизайн Сетка

Question

Когда я занимаюсь разработкой в ​​адаптивном виде браузера (например, Firefox: iphone X), ​​все идеально подходит, но когда я переключаюсь на браузер iphone X (Safari или Chrome), содержимое идет за нижним меню браузера, и мне нужно прокрутить, чтобы увидеть содержимое.

Не учитывает ли сетка размер окна просмотра минус размер нижнего меню браузера?

Любая подсказка побороть эту тему?

Заранее спасибо.

Answer 1

Мне удалось найти обходной путь, но это не идеальное решение, но оно решило проблему.

Проблема в мобильной среде - всегда иметь фиксированное нижнее меню - связана со свойством height: 100vh в .main-container обертка. Тогда какой был обходной путь?

Был добавлен в styles.css для определения эталонной высоты height: 100%

html, body {
  height: 100%;
}

и в app.component.css

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

. .. и это сделано. См. Пример по адресу stackblitz.com / edit / clarity-design-grid-responseive .