Googleマップ - 残りの高さを入力してください

マップアプリケーションで作業していますが、私はGoogleマップDIVがヘッダーの下の残りの高さを埋めるようにしたいと思います。以下のコード。Googleマップ - 残りの高さを入力してください

<!DOCTYPE html> 
    <head> 
    <title>Map Application</title> 

    <style type="text/css"> 
    html { 
     height: 100%; 
    } 
    body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
    } 
    #map_canvas { 
     margin: 0; 
     padding: 0; 
     height: 95%; 
     width: 100%; 
    } 
    @media (max-width: 767px) { 
     #start_lat, #start_lng, #dest_lat{ 
      margin-bottom: 0.5em; 
     } 
    } 
</style> 

<!-- Bootstrap --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 

<!-- Fontawesome --> 
<script src="https://use.fontawesome.com/2eede759bf.js"></script> 

<script type="text/javascript"> 
    var map; 
    var markers = []; 
    var path; 
    var bounds; 
    function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(-25.363, 131.044), 
     zoom: 15, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
} 
</script> 
</head> 
<body> 
    <nav class="navbar navbar-expand-lg navbar-light bg-light"> 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
     </button> 
     <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
     <form class="form-inline my-2 my-lg-0 mx-auto" id="map-data" action="" method="POST" align="center"> 
      <!-- Here goes a form with a few input fields and buttons. --> 
     </form> 
    </div> 
</nav> 
<div id="map_canvas"></div> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key={{ GMAPS_API_KEY }}&callback=initialize"></script> 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
</body> 
</html>

私は絶対的な位置付けで試したことがありますが、Googleマップのように相対的な位置付けで上書きしているようです。

ありがとうございます。

出典

2017-12-15 quieri

あなたは#map_canvasの高さを計算するために）<nav>に固定の高さを与えると計算値（使用することができます

.navbar { 
    height:150px; 
} 

#map_canvas { 
    height:calc(100vh - 150px); 
}

そうでなければあなたはフレキシボックスを使用することができます。

body { 
    display:flex; 
    flex-direction:column; 
    min-height:100vh; 
} 

.navbar { 
    flex-grow:0; 
} 

#map_canvas { 
    flex-grow:1; 
}

出典

2017-12-15 09:12:57 rblarsen

は、フレキシボックスソリューションをありがとうまさに私が望んだことでした。もう一度ありがとう！ – quieri

これを試してみてください：0PX #map_canvas用：

#map_canvas { 
position: absolute; 
top: 0px; 
}

が絶対とトップの位置を与えてみてください。これはすべきです。

出典

2017-12-15 09:01:30

Googleマップ - 残りの高さを入力してください

答えて

関連する問題