Css 在谷歌地图上添加覆盖，使地图底部显示

我试图使用谷歌地图的位置作为一个页面的背景。但是，覆盖将不会覆盖整个地图，地图的底部将显示

即使我尝试将

地图画布

和

覆盖

的高度设置为

100vh

时，地图仍然超过覆盖

函数初始化（）{
变量映射选项={
缩放：15，
中心：新google.maps.LatLng（0,0）
};
var map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
}
函数loadScript（）{
var script=document.createElement（'script'）；
script.type='text/javascript'；
script.src=https://maps.googleapis.com/maps/api/js?v=3.exp“+”&signed_in=true&callback=initialize'；
document.body.appendChild（脚本）；
}
window.onload=loadScript
html，正文{
身高：100%；
}
#地图画布{
身高：100%；
宽度：100%；
z指数：0；
}
.覆盖{
身高：100%；
宽度：100%；
位置：绝对位置；
排名：0；
左：0；
背景：rgba（0,0,0,0.5）；
z指数：1；
}
默认情况下，浏览器在
主体上添加
边距
，使主体实际占据超过100%的高度（100%加上任何边距）。如果您明确删除此页边距，则您的问题已修复。这是CSS重置为何流行的一个很好的例子


函数初始化（）{
变量映射选项={
缩放：15，
中心：新google.maps.LatLng（0,0）
};
var map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
}
函数loadScript（）{
var script=document.createElement（'script'）；
script.type='text/javascript'；
script.src=https://maps.googleapis.com/maps/api/js?v=3.exp“+”&signed_in=true&callback=initialize'；
document.body.appendChild（脚本）；
}
window.onload=loadScript
html，正文{
身高：100%；
保证金：0；
}
#地图画布{
身高：100%；
宽度：100%；
z指数：0；
}
.覆盖{
身高：100%；
宽度：100%；
位置：绝对位置；
排名：0；
左：0；
背景：rgba（0,0,0,0.5）；
z指数：1；
}

地图画布的位置确实与
.overlay
不同，因为它的位置会受到页面填充/边距的影响

您有以下选项（可能还有更多）：

删除填充/边距：

html, body {
 height: 100%;
 margin:0;
 padding:0;
}


当您希望保留填充/边距并希望覆盖图覆盖地图而不考虑地图大小/位置时，请使用
.overlay
作为
#地图画布
的子级：

 <div id="map-canvas"><div class="overlay"></div></div>

html，
身体{
身高：100%；
}
#地图画布{
身高：80%；
宽度：70%；
z指数：0；
}
.覆盖{
身高：100%；
宽度：100%；
位置：绝对位置；
排名：0；
左：0；
背景：rgba（0,0,0,0.5）；
z指数：1；
}