В полноэкранном режиме Внизу Навигатор

Я пытаюсь добавить карту в полноэкранный фон ниже моего Bootstrap NavBar, но в настоящий момент мой код заставляет нижнюю часть карты переполнять страницу.В полноэкранном режиме Внизу Навигатор

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

Мой CSS код выглядит следующим образом:

#map { 
    /* Set rules to fill background */ 
    height: 100%; 
    width: 100%; 

    /* Set up positioning */ 
    position: fixed; 
    top: 50px; 
    left: 0; 

    }

Вот снимок экрана моей странице, вы можете увидеть в правом нижнем углу, что карта определение и контроль был отрезан: MapDispla

источник

2014-12-09 FrasKyl

Можете ли вы воспроизвести это в jsFiddle или Bootply? Не зная, как выглядит окружающий код, трудно помочь. – DavidG

Вы говорите, что знаете, что проблема верха: 50px; есть ли причина, по которой вам нужно, чтобы она была там? – skv

use 'position: absolute; border-top: 50px solid #fff; top: 0px;' вместо 'position: fixed; top: 50px;' for '# map' http://jsfiddle.net/7291hLkx/2/ –

Вы устанавливаете свою высоту карты как 100%. Вместо этого попробуйте установить фиксированную высоту.

Если он слишком широкий, добавьте его в свои файлы CSS.

.gmnoprint img { 
    max-width: none; 
}

Кроме того, попробуйте это, если это не работает:

html,body { 
    height: 100%; 
    width: 100%; 
} 
.whateveryourmapis { 
    height: auto; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin-top: -50px; 
}

источник

2014-12-09 02:12:52 mijopabe

Причина роста: 100% состояла в том, чтобы обеспечить сохранение карты по отношению к окну. Если я установил высоту исправления, то, возможно, у меня возникнут проблемы с отображением карты при изменении размера. Спасибо за помощь, хотя, очень ценим! – FrasKyl

Вам нужно подождать, пока DIV, в котором не содержание отображается потому, что Google Map chcecks его ширина Wery рано - и получает небольшую ширину (или 0) и не отображать.

Попробуйте это:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
     google.maps.event.trigger(map, 'resize'); 
    });

Это вызов - когда Div контента после щелчка на вкладки обходилась ТОГДА «изменения размера» Google Map на правильную ширину.

Для меня это работает.

источник

2016-10-10 08:03:18

В полноэкранном режиме Внизу Навигатор

ответ

Смежные вопросы