#html #css
#HTML #css
Вопрос:
У меня есть липкий экземпляр Google maps (должен иметь явную высоту) внутри основного тега. В левой части экрана есть содержимое (изменяется по высоте в зависимости от ответа БД), которое пользователь может прокручивать, пока карта прилипает, затем, как только нижний колонтитул достигнут, карта не прилипает. Все это работает нормально, за исключением того, что высота карты (100vh) добавляется в конец содержимого, поэтому в конце остается только пустое пространство для прокрутки. Никакие манипуляции с высотой или переполнением main и еще много чего, похоже, не дают мне желаемого поведения и удаляют это пустое пространство. Даже если я размещаю карту-оболочку за пределами ее высоты, она волшебным образом добавляется к количеству прокрутки, чтобы добраться до дна. Поведение, которое я ищу, похоже на представление поиска AirBnb со списком слева и картой справа.
.map-wrapper {
position: sticky;
top: 0;
right: auto;
bottom: 0;
left: 48rem;
width: calc(100% - 48rem);
}
.map {
height: calc(100vh - 4rem);
}
.left {
padding: 2rem;
width: 48rem;
}
main {
margin-top: 4rem;
min-height: calc(100vh - 4rem);
} <main>
<div>
<div class="left">
<section>
<ul>
<li>
</ul>
</section>
</div>
<div class="map-wrapper">
<div class="map"></div>
</div>
</div>
</main> Комментарии:
1. К вашему сведению, вам не хватает закрывающего тега div
.map. Не уверен, что это также отсутствует в вашем реальном коде или это просто ошибка транскрипции. В любом случае нам нужно увидеть некоторый фактический (или заполняющий) контент, который представляет то, что вы видите, чтобы лучше помочь вам.2. Если я правильно понимаю, у вас есть поле по умолчанию для тега body, поэтому 100vh приведет к некоторой прокрутке. Чтобы предотвратить это, вы можете использовать либо body{margin:0}, либо лучше, код сброса, который я обычно использую *{margin:0;padding:0}, чтобы удалить все пробелы по умолчанию (либо поля, либо отступы) любого тега, затем вы можете вручную изменить их на свой предпочтительный стиль, еслитребуется.
3. Спасибо вам всем. Но, к сожалению, нет. Это проект react, но проблема заключается исключительно в html / css, поэтому я немного сократил код. Содержимое представляет собой ul с li, которые содержат загрузочные карточки. В принципе, что бы я ни делал, мне нужно прокручивать пустое пространство, эквивалентное высоте карты (какой бы большой ни была область просмотра), прежде чем я доберусь до нижнего колонтитула, и в этот момент карта становится «отклеенной», как и должно быть.
4. Хорошо, слишком занят, чтобы вкладывать больше сейчас, но упомянутый вами целевой веб использует absolute вместо static, поэтому вы уверены, что хотите использовать static?
5. Вы говорите о том, как экземпляр Google map airbnb показывает абсолютный? … Я не знаю, как они могут использовать absolute, но при достижении нижнего колонтитула у них все еще есть прокрутка карты, но, похоже, это точный вариант использования, для которого был создан sticky, поэтому я попробовал его, и он так легко прошел 90% пути. Но если бы я мог понять, как это сделать с помощью absolute, я все для этого, я буду исследовать, еще не прошел этот путь.