Deux positions divs

J'utilise Google Maps pour la page. Je dois mettre en place la couche sur la carte avec une hauteur de 100% dans une largeur de 100% moins 200 px pour la barre d'outils à gauche:Deux positions divs

<div id="toolbar" style="float: left;width: 20%">left</div> 
<div id="map" style="float: left;width: 80%;height: 100%;"></div>

Ce code fonctionne, mais la barre d'outils redimensionne. Et j'ai besoin de seulement 200 px là-bas. Comment puis-je faire cela en sauvegardant le positionnement de la carte? Le code:

<html> 
    <head> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
     <style> 
      body, html 
      { 
       width: 100%; 
       height: 100%; 
      } 

      body 
      { 
       margin: 0; 
      } 
     </style> 
    </head> 
    <body> 
     <script> 
      $(document).ready(function() { 
        var city = new google.maps.LatLng(56.3, 44) 

        var mapOptions = { 
         zoom: 12, 
         center: city, 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
        } 
        map = new google.maps.Map($('#map').get(0), mapOptions) 
      }) 
     </script> 
     <div id="toolbar" style="float: left;width: 20%">left</div> 
     <div id="map" style="float: left;width: 80%;height: 100%;"></div> 
    </body> 
</html>

Source

2010-09-13 Ockonal

Il a été un peu écaillée dans Safari, donc je devais envelopper le #map div dans un autre div pour résoudre le problème. Essayez ceci:

<html> 
    <head> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
     <style> 
      body, html 
      { 
       width: 100%; 
       height: 100%; 
      } 

      body 
      { 
       margin: 0; 
      } 
     </style> 
    </head> 
    <body> 
     <script> 
      $(document).ready(function() { 
        var city = new google.maps.LatLng(56.3, 44) 

        var mapOptions = { 
         zoom: 12, 
         center: city, 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
        } 
        map = new google.maps.Map($('#map').get(0), mapOptions) 
      }) 
     </script> 
     <div id="toolbar" style="float: left; width: 200px;">left</div> 
     <div style="margin-left: 200px;"> 
      <div id="map" style="width: 100%; height: 100%;"></div> 
     </div> 
    </body> 
</html>

Source

2010-09-13 13:04:05

Il est maintenant barre de défilement horizontale. – Ockonal

Hmm ... est-ce environ 200 pixels de défilement horizontal? Aussi, avez-vous toujours la largeur: 100% dans le style #map? –

oui, le défilement est ~ 200 pixels – Ockonal

essayer si vous n'utilisez pas réinitialisée css:


<div id="toolbar" style="float: left;width: 20%;margin:0;padding:0">left 
<div id="map" style="float: left;width: 80%;height: 100%;margin:0;padding:0">

Source

2010-09-13 13:05:54

La barre d'outils change sa propre taille lors du redimensionnement – Ockonal

L'OP souhaite que la barre d'outils soit 200px, et non 20%. –

Répondre

Questions connexes