当容器 div 缩小时，谷歌地图消失

Question

我有一个 div 结构中的谷歌地图，如下所示：

<div style="width:100%;height:100%;">
    <div id="divLeft" style="float:left;width:445px;height:100%;position:relative;overflow-y:scroll;overflow-x:hidden">
    <div id="divRight" style="float:left;width:75%;position:relative">
         <input id="searchTextField" type="text" />
         <div id="map-canvas" style="width:100%;height:100%"></div>
    </div>
</div>

map-canvas div 是实际的地图。

在我开始调整浏览器窗口大小以使其更小之前，所有这些都可以正常工作。或者即使窗口开始时太小。谷歌地图完全消失了。当地图消失时，我已经确定了窗口的确切像素宽度。在 1335 像素宽度或更大时，地图就在那里。在 1334 像素宽度或更小，它消失了。注意divRight（map-canvas 的 div 容器）的初始宽度从 75% 开始。这似乎是错误的和武断的，但这是我能找到的所有工作。任何更高的百分比和地图从一开始就消失了。窗口高度可以是任何东西，地图很好。只有宽度导致它消失。 divLeft 需要固定宽度为 445px，但我希望 divRight 和 map-canvas 填充 100% 的剩余窗口空间。

这似乎也不能解决问题：

$(window).resize(function() {
    google.maps.event.trigger(map, "resize");
});

我也尝试过使用 jquery 动态调整大小，但没有成功：

$(window).resize(function() {
    $("#map-canvas").css("width", $("#divRight").width());
    $("#map-canvas").css("height", $("#divRight").height());
    google.maps.event.trigger(map, "resize");
});

这是一个简化的web page showing the problem。如果您在右侧 div 中看不到谷歌地图，只有一堆空白，那么您的浏览器窗口宽度小于 1335 像素。不知道那个宽度有什么特别之处。

google map为什么要在一定宽度处消失，该如何解决？

Answer 1

问题是在断点处，右窗格的 75% 宽度大于窗口宽度减去左窗格的 445px。

因此，由于车身高度为 100% 且溢出隐藏，因此浮动被向下推且不可见。

作为快速测试，将左侧窗格宽度设置为 25%，地图将始终显示。

结论：

您的调整大小代码处理了错误的元素。它应该检查#divRight 宽度是否适合窗口