Angular 4 - Google地圖高度填充剩餘空間

我在我的angular 4應用程序中使用https://github.com/SebastianM/angular-google-maps。Angular 4 - Google地圖高度填充剩餘空間

我必須在CSS中指定地圖的高度，這樣，否則，地圖將不會顯示：

agm-map { 
    height: 300px; 
}

是否有可能爲<agm-map>在父容器填補剩餘空間？

PS：我會用https://github.com/angular/flex-layout

來源

2017-08-27 hendrix

嘗試'padding-top：100％'並且不設置高度 –

沒有工作。如果我不設置任何高度，地圖不可見。這個問題是非常具體的角谷歌地圖庫。 – hendrix

身高：100％;應該填寫整個家長 – Vega

您可以使用模板參考來獲取地圖的父元素的高度，並設置地圖的高度。

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

來源

2017-08-28 01:11:43 JayChase

工程。這正是我所期待的，thanx;） – hendrix

身高100％，將無法正常工作傾向於解決方案，除非它的父元素具有的比例可以用來比較的高度（或如果您使用固定或絕對定位）。高度100％不能像'寬度100％'那樣可靠地工作，因爲頁面高度可以無限高，但只有這麼寬。地圖的父母或父母的父母等最終需要具有指定的高度，除非地圖以外的框中有內容。如果還有其他內容如文字，則高度：100％將填充與其他內容相同的高度。如果沒有，你可以嘗試使用VH單位指定屏幕高度的絕對比例

height : 100vh

這將使得它以全屏幕高度，但是，如果你是包裝它，你想要的靈活性的另一個元素中通常不是理想用。你也可以嘗試設置最小高度。

來源

2017-08-27 13:48:39 diopside

Angular 4 - Google地圖高度填充剩餘空間

回答

相關問題