角4 - Googleマップの高さの残りのスペースを埋める

Question

私は角度4のアプリケーションでhttps://github.com/SebastianM/angular-google-mapsを使用しています。

私はこのような、そうでない場合は、マップが表示されません、CSSにマップの高さを指定する必要があります。

agm-map { 
    height: 300px; 
} 

それは<agm-map>は、親コンテナ内の残りのスペースを埋めるためには可能ですか？

PS：私は、その親要素が割合がと比較するために使用することができ、高さを持っていない限り、100％は動作しません（あるいはあなたが固定または絶対位置を使用している場合）https://github.com/angular/flex-layout

Answer 1

テンプレートのrefを使って地図の親要素の高さを取得し、地図の高さをそのように設定することができます。

<div class="container" fxLayout="column"> 
     <div class="map" fxFlex="1 1 100%" #map> 
     <agm-map [style.height.px]="map.offsetHeight" [latitude]="lat" [longitude]="lng"></agm-map> 
     </div> 
    </div> 

Answer 2

高さを使用してソリューションを好むだろう。高さ100％は「幅100％」と同じくらい確実に機能しません。なぜなら、ページの高さは無限に高くなりますが、幅が非常に広いからです。マップの親または親の親などは、マップ以外のボックスに内容がない限り、最終的に指定された高さを持つ必要があります。テキストのような他のコンテンツがある場合、高さ：100％は、他のコンテンツが占有する高さと同じ高さだけを埋めるだけです。それがなければ、これはそれがフルスクリーンの高さを取るようになりますが、あなたは柔軟性をしたい別の要素の内部でそれをラップしている場合には、通常は理想的ではないのです

height : 100vh 

画面の高さの絶対的な割合を指定するには、VHユニットを使用しようとすることができますと。最小の高さを設定することもできます。