谷歌地图div没有出现在JSBin中 [英] Google Maps div not showing up in JSBin

问题描述

如果我将宽度设置为 500 像素，则可以在单击开始"按钮时显示地图画布 div.如果我将高度/宽度设置为 100%，它就不会显示.

If I set my width to 500px, I can get the map-canvas div to show up when I click my "get started" button. If I set my height/width to 100%, it doesn't show up.

我想确保我的项目可以在移动设备上加载，所以我不想使用绝对尺寸.

I want to be sure my project will load on a mobile device so I don't want to use absolute dimensions.

http://jsbin.com/OpujukIF/1/edit?html,css，输出

推荐答案

使用可以使用没有width的绝对定位|height 值，使用 top|left|bottom|right 和 0 设置为它们的值，这将导致 #map-canvas div 成为包含元素 #second 的大小，只要它像这样设置为相对:

Use can use absolute positioning without a width | height value, using top|left|bottom|right with 0 set as their values which would result in the #map-canvas div becoming the size of the containing element #second as long as it is set to relative like so:

#second {
    position: relative;
}

#map-canvas { 
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
}

这是更新后的bin.

我希望这会有所帮助！

这篇关于谷歌地图div没有出现在JSBin中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！