Google Maps Höhenproblem mit CSS Flexbox Modell

Ich habe ein einfaches Layout, wo der Körper die volle Höhe minus Höhe der Fußzeile + Höhe des Headers nimmt. Dies wird mit Flexbox Modell erreicht (http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/)Google Maps Höhenproblem mit CSS Flexbox Modell

<!DOCTYPE html> 
<html> 
<head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; /* to avoid scrollbars */ 
     } 
     #wrapper { 
      display: flex; /* use the flex model */ 
      min-height: 100%; 
      flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */ 
     } 
     #header { 
      background: yellow; 
      height: 100px; /* can be variable as well */ 
     } 
     #body { 
      flex: 1; 
      border: 1px solid orange; 
      height: 100%; 
     } 
     #footer { 
      background: lime; 
     } 
     #map-canvas { 
      height: 100%; 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
    <script> 
     var map; 
     function initialize() { 
      var mapOptions = { 
       zoom: 8, 
       center: new google.maps.LatLng(-34.397, 150.644) 
      }; 
      map = new google.maps.Map(document.getElementById('map-canvas'), 
      mapOptions); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="header">Title</div> 
     <div id="body"> 
      <div id="map-canvas"></div> 
     </div> 
     <div id="footer"> 
      Footer<br /> 
      of<br /> 
      variable<br /> 
      height<br /> 
     </div> 
    </div> 
</body> 
</html>

Ich bin vor einem Problem mit Google Maps. Ich kann es nicht in die Canvas div initialisieren, weil (ich nehme an, das ist der Grund) es hat keine definierte Höhe.

Gibt es eine Möglichkeit Google Maps zu erstellen?

Dank

Quelle

2014-11-30 Vladimir Hraban

Wie auch Sie die Flexbox? – geocodezip

@geocodezip, Es wird von allen modernen Browsern heutzutage ohne JS von Drittanbietern unterstützt –

Stellen Sie die #map-canvas Höhe auf die Höhe des #body Element in JavaScript, bevor Sie Ihre Karte zu erstellen.

var mapCanvas = document.getElementById('map-canvas'); 
mapCanvas.style.height = document.getElementById('body').clientHeight + 'px';

jQuery-Version:

$('#map-canvas').height($('#body').height());

JSFiddle demo

Quelle

2014-11-30 15:27:28 MrUpsidown

height: 100% funktioniert nicht wie erwartet. Sie können die Google-Karte absolute Positionierung Größe verwenden:

var map; 
 
function initialize() { 
 
    var mapOptions = { 
 
    zoom: 8, 
 
    center: new google.maps.LatLng(-34.397, 150.644) 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#wrapper { 
 
    display: flex; 
 
    min-height: 100%; 
 
    flex-direction: column; 
 
} 
 
#header { 
 
    background: yellow; 
 
    height: 100px; 
 
} 
 
#body { 
 
    flex: 1; 
 
    background: orange; 
 
    position: relative; 
 
} 
 
#footer { 
 
    background: lime; 
 
} 
 
#map-canvas { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
 
<div id="wrapper"> 
 
    <div id="header">Title</div> 
 
    <div id="body"> 
 
    <div id="map-canvas"></div> 
 
    </div> 
 
    <div id="footer"> 
 
    Footer<br/>of<br/>variable<br/>height 
 
    </div> 
 
</div>

Quelle

2014-11-30 15:52:57

Google Maps Höhenproblem mit CSS Flexbox Modell

Antwort

Verwandte Themen