Vấn đề về chiều cao của Google Maps với mô hình CSS Flexbox

Tôi có bố cục đơn giản nơi thân thể có chiều cao đầy đủ trừ chiều cao của chân trang + chiều cao của tiêu đề. Điều này đạt được với mô hình flexbox (http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/)Vấn đề về chiều cao của Google Maps với mô hình CSS Flexbox

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

Tôi đang gặp sự cố với bản đồ google. Tôi không thể khởi tạo nó vào div vải vì (tôi cho rằng đó là lý do) nó không có chiều cao xác định.

Có cách nào để làm cho bản đồ google xuất hiện không?

Cảm ơn

Nguồn

2014-11-30 Vladimir Hraban

How are you bao gồm flexbox? – geocodezip

@geocodezip, Nó được hỗ trợ bởi tất cả các trình duyệt hiện đại ngày nay mà không cần bất kỳ bên thứ ba JS –

Đặt chiều cao #map-canvas với chiều cao của phần tử #body trong JavaScript trước khi tạo bản đồ của bạn.

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

jQuery phiên bản:

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

JSFiddle demo

Nguồn

2014-11-30 15:27:28 MrUpsidown

height: 100% không làm việc như mong đợi. Bạn có thể sử dụng định vị tuyệt đối để kích thước bản đồ của Google:

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>

Nguồn

2014-11-30 15:52:57

Vấn đề về chiều cao của Google Maps với mô hình CSS Flexbox

Trả lời

Các vấn đề liên quan