Две позиции деления - PullRequest
Новая
       10

Две позиции деления

2 голосов
/ 13 сентября 2010

Я использую карты Google для страницы.Мне нужно настроить слой с картой высотой 100% при ширине 100% минус 200 пикселей для панели инструментов слева: 

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

Ответы [ 2 ]

0 голосов
/ 13 сентября 2010

попробуйте это, если вы не используете сброс 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">
0 голосов
/ 13 сентября 2010

В Safari это немного шло, поэтому мне пришлось обернуть div #map в другой 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...