Проблемы с отображением карты-листовки на небольших экранах в макете HTML/CSS

У меня возникла проблема с макетом HTML/CSS, из-за которой элемент карты (#map) не отображается на маленьких экранах, а настройки карты (map-settings) видны. Вот упрощенная версия моего кода:

<!-- index.html -->
<!DOCTYPE html>
<html lang = "en">
<head>
  <!-- Meta tags and title -->
</head>
<body>
  <div class = "content-wrapper">
    <div class = "content-wrapper-inner">
      <div class = "main-content">
        <div id = "map"></div>
        <div class = "map-settings" id = "map-settings">
          <!-- Map settings content -->
        </div>
      </div>
      <div class = "sidebar-content">
        <!-- Sidebar content -->
      </div>
    </div>
  </div>
</body>
</html>


CSS:


/* index_page.css */

/* Ensure the map takes up full height of its container */
#map {
  flex: 1;
  width: 100%;
  height: 100%; /* Add this line to ensure the map fills its container's height */
}

/* Ensure the map settings remain visible on smaller screens */
.map-settings {
  background: white;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  margin-bottom: 20px; /* Adjust margin to create space between map and settings */
  z-index: 1000;
}

/* Ensure proper layout on smaller screens */
@media (max-width: 768px) {
  .content-wrapper-inner {
    flex-direction: column;
  }

  .main-content {
    width: 100%;
  }

  #map {
    flex: 1;
    height: 300px; /* Set a fixed height for the map on smaller screens */
  }

  .sidebar-content {
    width: 100%;
  }
}


Я заметил, что при уменьшении ширины экрана карта исчезает, а настройки карты остаются видимыми. Я пробовал настроить свойства CSS и медиа-запросы, но мне не удалось заставить карту правильно отображаться на маленьких экранах.

Вот как это выглядит на экранах ПК:

Вот как это объявление выглядит на экранах мобильных устройств:

Вы можете видеть, что на экранах мобильных устройств отображаются только настройки карты. Настоящая карта отсутствует.

Я пробовал играть со свойством overflow, но сделать так, как должно быть, мне не удалось.

А еще карта от leaflet, если это вам поможет.

Может кто-нибудь помочь мне понять, почему карта не отображается на маленьких экранах и как я могу решить эту проблему? Любые идеи или предложения будут с благодарностью приняты. Спасибо!

Более подробную информацию предоставлю по запросу.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
59
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Основная проблема заключается в том, что элемент #map не имеет явно заданной высоты для небольших экранов, что приводит к его сворачиванию и неправильному отображению.

Вот обновленный CSS, который гарантирует, что элемент #map имеет явную высоту на небольших экранах:

#map {
  flex: 1;
  width: 100%;
  height: 100%; 
}

@media (max-width: 768px) {
  .content-wrapper-inner {
    flex-direction: column;
  }

  .main-content {
    width: 100%;
  }

  #map {
    flex: 1;
    height: 300px; 
  }

  .sidebar-content {
    width: 100%;
  }
}

Элемент #map не имел явно заданной высоты для меньших экранов, поэтому он исчезал при уменьшении размера экрана. Добавив фиксированную высоту (высота: 300 пикселей;) для #map в медиа-запросе для экранов с максимальной шириной 768 пикселей, теперь карта будет иметь видимую высоту на экранах меньшего размера.

Надеюсь это поможет.

Ответ принят как подходящий

Я не знаю, предоставили ли вы недостающий код или нет, но когда я копирую ваш код в песочницу, он действительно работает на мобильных устройствах, но не на настольных компьютерах (полностью противоположно вашей проблеме).

Это потому, что вы заставляете карту заполнять контейнер, но контейнер карты (.main-content) не имеет высоты. Итак, на настольном компьютере он отображается неправильно, но на мобильном устройстве он отображается идеально только потому, что вы установили его высоту на 300 пикселей. Чтобы гарантировать, что .main-content имеет высоту, мы можем создать его контейнер flex и убедиться, что он имеет высоту, присвоив себе aspect-ratio (или вы можете напрямую указать точную высоту).

Попробуйте что-нибудь вроде этого.

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href = "https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
/* index_page.css */

.content-wrapper-inner{
  display: flex;
}
/* Ensure the map takes up full height of its container */
#map {
  width: 100%;
  height: 100%; /* Add this line to ensure the map fills its container's height */
}
.sidebar-content {
  flex: 1;
}
.main-content {
  flex: 3;
  aspect-ratio: 1;
}

/* Ensure the map settings remain visible on smaller screens */
.map-settings {
  background: white;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  margin-bottom: 20px; /* Adjust margin to create space between map and settings */
  z-index: 1000;
}

/* Ensure proper layout on smaller screens */
@media (max-width: 768px) {
  .content-wrapper-inner {
    flex-direction: column;
  }
  .main-content {
    aspect-ratio: auto;
  }

  #map {
    height: 300px; /* Set a fixed height for the map on smaller screens */
  }
}
<div class = "content-wrapper">
    <div class = "content-wrapper-inner">
      <div class = "main-content">
        <div id = "map"></div>
        <div class = "map-settings" id = "map-settings">
          map settings
        </div>
      </div>
      <div class = "sidebar-content">
        sidebar
      </div>
    </div>
  </div>

<link rel = "stylesheet" href = "https://unpkg.com/[email protected]/dist/leaflet.css" integrity = "sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY = " crossorigin = "" />
<script src = "https://unpkg.com/[email protected]/dist/leaflet.js" integrity = "sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo = " crossorigin = ""></script>

Другие вопросы по теме