Größe einer Google-Karte, um die div - Mystery Pixel anzupassen?

Ich habe ein einfaches Seitenlayout mit zwei Divs - eins oben und eins unten. Das div auf der Unterseite ist, wo ich meine Google Karte laden möchte. Ich möchte, dass die Karte das untere div füllt und die Größe automatisch ändert, wenn das Fenster in der Größe geändert wird.Größe einer Google-Karte, um die div - Mystery Pixel anzupassen?

Ich habe ein bisschen Skript, das die Höhe des Div auch anpasst. Es funktioniert gut, aber aus irgendeinem Grund gibt es 29 "mysteriöse Pixel", die ich von der Gesamthöhe abziehen muss, damit alles richtig funktioniert.

Irgendeine Idee, woher diese mysteriösen Pixel kommen? Ich habe den DOM-Inspektor von Chrome verwendet, konnte aber keine Hinweise finden.

Hier ist der HTML-Code auf der Seite:

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title> 
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" 
     rel="stylesheet" type="text/css" /> 
    <link href="css/jquery.loadmask.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script type="text/javascript" src="js/jquery.loadmask.min.js"></script> 
    <script type="text/javascript" src="js/map.js"></script> 
</head> 
<body style="height: 0px !important"> 
    <div id="search" style="margin-left: 8px; font-family: Arial, Helvetica, sans-serif; font-size: small"> 
     <h3> 
      New Districts for the 2012 Election</h3> 
     <p> 
      Enter your home address including street address, city and zip code in the boxes 
      below and press the Find My District button. Once you have completed the search, 
      click on the map to display district information. For information about how redistricting 
      may affect you, please go to <a href="http://www.leg.wa.gov/LIC/Documents/EducationAndInformation/Redistricting%20Information%20for%20Voters.pdf" 
       target="_blank">Redistricting Information for Voters</a> (PDF file). 
     </p> 
     <p> 
      Address: 
      <input id="Address" type="text" /> 
      City: 
      <input id="City" type="text" /> 
      State: 
      <input id="State" type="text" disabled="disabled" value="WA" style="width: 25px" /> 
      Zip: 
      <input id="Zip" type="text" style="width: 50px" /> 
     </p> 
     <p> 
      District Type: 
      <input type="radio" id="legislativeLayer" name="legislativeLayer" checked="checked" 
       onclick="Map.setLayer()" />Legislative 
      <input type="radio" id="congressionalLayer" name="legislativeLayer" onclick="Map.setLayer()" />Congressional 
      &nbsp; 
      <input type="submit" value="Find My District" onclick="Map.codeAddress()" /> 
     </p> 
    </div> 
    <div id="map_canvas" /> 
</body> 
</html>

Hier ist das entsprechende Skript:

// Initialize the map 
initialize: function() { 
    // Resize the map to fit the window 

    Map.resizeMapDiv(); 
    $(window).resize(Map.resizeMapDiv); 
}, 

// Resizes the height of the map div so it fits the window 
resizeMapDiv: function() { 
    $("#map_canvas").height($(window).height() - $("#search").height() - 29); 

    // Notify the map a resize has occurred, and center on that point 

    google.maps.event.trigger(Map.map, 'resize'); 

    if (Map.currentPosition) 
     Map.map.setCenter(Map.currentPosition); 
    else 
     Map.map.setCenter(Map.initialPosition); 
}

Quelle

2012-03-26 Frank Hoffman

können Sie bitte eine Demo des Problems bereitstellen? –

Beitrag aktualisiert mit HTML –

Das wird nicht viel helfen, wir müssen zumindest map.js zu sehen. –

Versuchen jQuery Offset() Methode verwendet:

$("#map_canvas").height($(window).height() - $("#map_canvas").offset().top));

Das Geheimnis 29px Sie sind Begegnung ist die Höhe der Navigationsleiste Ihres Browsers, die im $ (window) .height() enthalten ist.

Wenn Sie immer noch feststellen, dass die Höhe die Fenstergröße erweitert, müssen Sie möglicherweise auch Padding/Rand kompensieren.

Jede Polsterung oder Ränder am Körper wirken sich auch auf die Höhe aus. Stellen Sie sicher, dass diese auch auf 0px eingestellt sind.

<body style="padding:0; margin:0;">

Quelle

2012-03-26 23:12:40

Ehrfürchtig, das ist es. Vielen Dank! –

Größe einer Google-Karte, um die div - Mystery Pixel anzupassen?

Antwort

Verwandte Themen