我尝试使用以下代码将Google地图添加到我的Umbraco网站。Div#map_canvas从 API 获取相对位置，因此不会显示在页面上。如果我在检查器中手动覆盖静态定位，则会出现地图，但是我已经尝试了各种方式永久覆盖它，使用在堆栈溢出其他地方找到的建议，但没有成功。谁能提出一种方法来做到这一点？
编辑：萝卜，这是我所能得到的尽可能接近，因为该页面继承了一些Umbraco代码并显示在Umbraco的预览窗口中，但我认为问题无论如何都不会存在。
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.MasterTemplate2>
@using ContentModels = Umbraco.Web.PublishedContentModels;
@{
Layout = null;
}<!DOCTYPE html>
<html>
<head>
<title>"testpage"</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="/css/wsha-style.css">
<script src="~/umbraco/lib/jquery/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAbVhWKXQ2uj-n0lX1JsZh_DqG9RI-XDhE"></script>
</head>
<body>
<div id="map_canvas" style="height:100%;"></div>
<script>
$(document).ready(function () {
var map_position = new google.maps.LatLng(55.8735958,-4.3387407)
var map = new google.maps.Map(document.getElementById("map_canvas"), {
center: map_position,
zoom: 3
});
var marker = new google.maps.Marker({
position: map_position,
map: map,
title: 'Marker'
});
});
</script>
</body>
简短的回答：将高度：100%替换为所需的高度：100vh或px。
该百分比是根据 生成的框包含块。如果包含的高度 块未明确指定(即，它取决于内容 高度(，并且此元素不是绝对定位的，值 计算为"自动"。
在此处查看更多信息
进一步阅读：W3C 建议中的高度属性
您可以在地图 DIV 中使用任何位置，但您应该首先为父 DIV 提供不同的位置，例如：
#parentDIV {
position: relative;
}
#map_canvas {
position: absolute
}