将google地图的大小设置为屏幕大小的%？
将google地图的大小设置为屏幕大小的%？
提问于 2015-08-21 15:30:23
因此，我试图创建一个网站，将显示一个位置上的谷歌地图。我希望将地图大小设置为用户屏幕大小的%。这对于地图的宽度很好，但是当我尝试将高度设置为%时，地图就会消失。我尝试将车身设置为100%宽和100%高，我尝试使用容器div，但我对html和CSS还不熟悉，所以我不确定还能尝试什么。
CSS就在这里；
#map {
position: relative;
width: 35%;
height: 350px;
background-color: #CCC;
margin: 1% 0 0 15%;
}
#map-container {
height: 100%;
width: 100%;
}我用于映射的代码是直接从https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map中提取的，但如果需要，我可以上传完整的.html文档。
回答 4
Stack Overflow用户
回答已采纳
发布于 2015-08-21 16:48:33
将所有包含元素的高度和宽度设置为：
width: 100%;
height: 100%;Mike的Google v2教程中的讨论:地图div使用百分比高度
概念小提琴的证明
代码片段：
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);html,
body,
#map {
width: 100%;
height: 100%;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
Stack Overflow用户
发布于 2015-08-21 15:38:32
在对子元素使用px高度之前，映射容器需要定义一个%高度。
尝试：
#map-container{
height: 350px;
}
#map{
height: 100%;
}Stack Overflow用户
发布于 2015-08-21 15:42:37
不可能设置HTML元素的百分比高度，除非您有一个固定高度的父元素。
但是，现代浏览器是否支持相对于视图的高度，使用关键字'vh‘而不是'%’。
否则，您必须计算视图端口的高度，并通过Javascript / jQuery设置元素高度。
见更多信息这里
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32144184
复制相关文章
相似问题
腾讯云开发者
