Не удается исправить раздел Google Map - PullRequest
Новая
       1

Не удается исправить раздел Google Map

2 голосов
/ 05 июля 2011

Я пытаюсь исправить раздел Google Map, чтобы он всегда был виден, но свойство стиля "position: fixed" почему-то не работает.Код следующий: 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta name="layout" content="main" />
    <style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0px; padding: 0px }
    #map_canvas { height: 100% }
    </style>
      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
      <script type="text/javascript">

           Some script

      </script>
  </head>
  <body onload="initialize()">
     <div class="nav">

            First div

     </div>
     <div id="artistList">

            Second div

     </div>
     <div id="map_canvas" style="position: fixed; right: 0px; top: 0px; width: 100%; height: 100%">

            Map div

     </div> 
  </body>
</html>

Любая помощь?Большое спасибо

Ответы [ 3 ]

2 голосов
/ 21 апреля 2013

Это решит это: 

<div id="fixed" style="position:fixed; top:0">
  <div id="map_canvas" style="width:100%; height:100%">
    [map content goes here]
  </div>
</div>
0 голосов
/ 08 декабря 2014

Решение Наджиба у меня не сработало.

Изменение элементов карты css (с позиции: абсолютная на позицию: фиксированная) после того, как событие карты «загружено» показалось работающим.

0 голосов
/ 05 июля 2011

Вы должны немного очистить свой код, чтобы сделать вещи более заметными.Сначала вы должны переместить настройки стиля CSS из вашего map_canvas в раздел CSS в заголовке HTML.Осталось чистое <div id="map_canvas"></div>.Теперь давайте перейдем к вашему разделу CSS в заголовке HTML.Попробуйте это так: 

<style type="text/css">
html {}
body {margin: 0px; padding: 10px }
#map_canvas {
    position: fixed;
    right: 0;
    top: 0;
    width: 90%;
    height: 90%;
    border:1px solid #f00;
    margin:10px;
}
</style>

Я удалил height:100%; из html и body.Я уменьшил размеры холста со 100% до 90% и выделил для него красную рамку и отступ в 10 пикселей, чтобы сделать вещи более четкими.Теперь div установлен в правом верхнем углу и исправлен.Я тестировал его на FF, Chrome, Safari и IE.

Но теперь один маленький вопрос ... Имеет ли смысл сделать холст 100% шириной и высотой ?!Map_canvas скрыл бы все остальное в вашем html ...?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...