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地图高度填充剩余空间

回答

相关问题