css - 全尺寸谷歌地图不适合屏幕尺寸

Question

我们正在构建一个包含覆盖所有主页的谷歌地图的网络应用程序。它看起来不错，但是当我在另一台计算机上打开它时，分辨率或屏幕尺寸略有不同， map 尺寸并没有相应改变。

我尝试使用“%”而不是“px”，但情况更糟， map 消失了。

我找到了一些使用“!important”的解决方案，但它对我不起作用，无法弄清楚原因。

这是我的 map CSS(级联样式表):

#google-container {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: #e7eaf0;
}

@media only screen and (min-width: 768px) {
    #google-container {
        height: 300px;
    }
}

@media only screen and (min-width: 1170px) {
    #google-container {
        height: 710px;
    }
}

#cd-google-map {
    position: relative;
}

#cd-google-map address {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 1em 1em;
    background-color: rgba(211, 104, 104, 0.9);
    color: white;
    font-size: 13px;
    font-size: 0.8125rem;
}

@media only screen and (min-width: 768px) {
    #cd-google-map address {
        font-size: 15px;
        font-size: 0.9375rem;
        text-align: center;
    }
}

这是我的 html( map 正在 main.js 文件中构建):

<section id="cd-google-map">
    <div id="google-container"></div>
    <div id="cd-zoom-in"></div>
    <div id="cd-zoom-out"></div>
    <div id="addNewReviewButton" ng-controller="NavCtrl">
        <button style="border-color: transparent; background-color: transparent;">
            <ng-md-icon icon="add_circle" style="fill: #d43f3a" size="120" ng-click="addNewReview()"></ng-md-icon>
        </button>
    </div>
</section>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAl8UrwCupLjkdVfx_IXugrryC8ES32Cz8&language=iw&?v=3.exp&sensor=false&libraries=places"></script>
<script src="js/main.js"></script>

这是它在我的设备上的外观图片，在其他设备上它非常适合:

Answer 1

您可以使用 vw(视口(viewport)宽度)和 vh(视口(viewport)高度)代替 %喜欢:

height: 100vh;