两个div位置

我正在使用谷歌地图作为页面。我要成立的层地图，在100％的宽度100％身高减去200像素的工具栏左侧：两个div位置

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

此代码的工作，但在工具栏调整大小。我只需要200像素。我该如何保存地图的位置？代码：

<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>

来源

2010-09-13 Ockonal

它剥落一点在Safari，所以我不得不来包装#map的div在另一个div来解决这个问题。试试这个：

<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>

来源

2010-09-13 13:04:05

有水平滚动条了。 – Ockonal 2010-09-13 13:21:02

嗯...它是大约200像素的水平滚动？另外，你还有宽度：100％的#map风格？ – 2010-09-13 13:32:13

是的，滚动是〜200像素 – Ockonal 2010-09-13 13:50:09

，如果你不使用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">

来源

2010-09-13 13:05:54

工具栏在调整大小时更改其自己的大小 – Ockonal 2010-09-13 13:21:45

OP希望工具栏为200px，而不是20％。 – 2010-09-13 13:31:08

两个div位置

回答

相关问题