Question

我正在使用带有一些css的嵌入式谷歌地图。但是，我使用的是overflow:hidden;，但仍会显示垂直滚动条。

有没有办法解决这个问题？这是我的代码：

<style>
.map-responsive{
    overflow:hidden;

    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;

    height:100%;
    width:100%;
    position:absolute;
}
</style>

<div class="hideoverflow">
<div class="map-responsive">
<iframe width="950" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJya9E14i2xUcRLWzbVXjmqMg&key=API_KEY-WMxApjPI&zoom=15" allowfullscreen></iframe></div>
</div>

Answer 1

The problem is the outer container and padding/margin, below is a full working example: 


<html>
<body>
<head>
<style>
html , body { height: 100%; overflow:hidden; padding:0; margin:0 }  
</style>
</head>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d867278.573568972!2d34.331652102906006!3d31.884666128727865!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x151cf2d28866bdd9%3A0xee17a001d166f686!2sPalestine!5e0!3m2!1sen!2s!4v1504401844245" 
 scrolling="no" height="100%" width="100%" frameborder="0" style="border:0" allowfullscreen></iframe>

</body>
</html>

使用谷歌地图隐藏垂直滚动条

1 个答案: