У меня есть <body> и <html>, чтобы заполнить всю высоту и ширину вида - и они это делают.Проблема в том, что теперь, когда у меня есть элемент карт Google, который по сути служит фоном страницы, другие элементы переполняют размер представления и выталкиваются за пределы экрана.
Вот так это выглядит сейчас.Я попытался отрегулировать размер элементов <html> и <body>, но на самом деле это не столько исправление, сколько взлом, так как оно отбрасывает компоновку другими способами.Я также пытался поиграть с опциями переполнения.
Вот как это выглядит, когда вы проверяете его, показывая переполнение и тот факт, чтотело правильного размера.(Вы должны уменьшить масштаб, чтобы увидеть переполнение.) Обратите внимание, что как правая сторона, так и нижняя часть, над фиксированной панелью навигации, показывают зазор между краем элемента карты и границами экрана.
Я предполагаю, что проблема заключается в CSS моего элемента карты, но я не могу понять, что это такое.Вот CSS для конкретной карты:
#map {
position: absolute;
top: 50px;
left: 80px;
height: calc(100vh - 50px);
width: calc(100vw - 80px);
z-index: 0;
overflow: hidden;
}
@media (max-width: 768px) {
#map {
top: 0;
left: 0;
height: calc(100vh - 55px);
width: 100vw;
}
}
А вот ссылка на кодовый блок, содержащий страницу с проблемой: https://codepen.io/redheadedmandy/pen/BVRxZE
Любые предложения по исправлению будут очень полезны!