使谷歌地图填充高度

Question

我正在使用此link在我的Ionic应用中添加Google地图。 它工作正常，但我希望它填充标题下方仍然可用的整个高度。

我只能在px中给它一个高度，如下：

.angular-google-map-container { height: 200px;}

当我将其更改为％时，它不再显示地图。

有谁可以帮我解决这个问题？

Answer 1

每当你使用一个百分比时，你必须问自己"Percentage of what?" ...因为你没有提供整个代码，所以不可能完美地回答你。

通过使用.angular-google-map-container { height: 200px;}，您强制所有父级容器增加其大小以适应200px高度。这就是它起作用的原因。

一个愚蠢的修复方法是使用view port高度值。类似的东西：

height: 80vh;

这是视口高度的80％。

Answer 2

我设法使用：

使其工作

.angular-google-map-container {
    position: absolute;
    top: 20px;
    bottom: 0;
    right: 0;
    left: 0;
}