javascript - 为什么这里地图没有撑开盒子的高度？

Question

如图，在第二个tab中我希望展示百度地图的组件，但是切换tab后地图组件无法撑开map-wrap的高度，所以无法展示。清除浮动也没有用。

Answer 1

一个是地图组件的初始化时机，初始化的时候外部容器是否有正确的宽高值。一般来说需要给外部容器设置一个有效的高度。
一个是你使用的Tabs组件是否有 init 之类的函数可以被手动触发，可能是后期动态修改了内容区域的高度之后。Tabs组件没有动态更新。

Answer 2

这个问题看起来是关于HTML和CSS的问题，特别是涉及到地图组件（可能使用的是JavaScript库如Leaflet或Google Maps等）以及tab组件（可能是Bootstrap或者其他的UI库）。

从你提供的图片中，我无法看到具体的代码，所以我不能提供确切的解决方案。但是，我可以给出一些可能的原因和解决方案。

1. CSS样式问题：地图组件可能没有正确地应用你给它的样式。你需要检查你的CSS，确保地图组件的样式设置正确。特别是，你可能需要设置地图的高度为100%，以确保它撑开map-wrap的高度。
2. 浮动问题：虽然你提到了清除浮动，但我不确定这是否解决问题。在某些情况下，浮动元素可能会影响父元素的高度。你可以尝试在父元素上使用overflow: auto;，这可以解决由于浮动引起的高度问题。
3. Tab组件：你提到了切换tab后地图组件无法撑开map-wrap的高度。这可能是因为在切换tab时，地图组件的尺寸没有正确更新。你可能需要监听tab的change事件，然后在事件触发后调用地图的resize方法（如果是使用Leaflet的话）。
4. 地图库的问题：如果你使用的是特定的地图库（如Leaflet或Google Maps），可能存在一些已知的问题或者限制。在某些情况下，这些问题可能会导致地图无法正确地填充其容器。你可以查阅该库的文档，看看是否有类似的问题报告或者解决方案。

最后，我建议你尝试在开发者工具中检查你的页面，看看是否存在其他可能影响布局的问题。例如，你可以检查元素的样式、计算后的样式、以及盒模型等。这可以帮助你更好地理解问题所在。