使用 HERE 地图和引导程序实现响应式设计答案

【问题标题】：Achieving responsive design with HERE maps and bootstrap使用 HERE 地图和引导程序实现响应式设计
【发布时间】：2016-05-30 00:29:35
【问题描述】：

我正在学习引导程序，并尝试使用基于 this example from HERE 的 HERE 地图

我意识到，为了能够使用相对高度（例如高度：50%），我必须制作这样的 css 样式：

html, body {
  height: 100%;
  width: 100%;
}

#map {
  width:100%;
  height: 100%;
  margin:0 auto;
}

现在我想用 bootstrap 创建两列，左边是行程，右边是地图视图。

<div class="container">
<div class="row">
  <div class="col-sm-4">
    Here comes the itinerary
  </div>
  <div class="col-sm-8" id="map">
  </div>
</div>

我很快意识到，我必须为地图元素使用绝对大小（例如宽度：400px），否则地图根本不显示（使用高度时：100%;）或者列从头开始堆叠（使用宽度：100%；）

我怀疑，原因在于父元素（行、容器）的宽度/高度样式，但我不知道正确的解决方案。

我也知道，在获得正确的样式后，我需要注意地图大小在窗口调整大小时的自动调整，但我想先获得正确的样式。

【问题讨论】：

只需在col-sm-8 内创建一个id 和map 的div，并在CSS 中给它一个高度（例如：#map { height: 400px; }）。它应该工作并且应该响应。
将地图 div 放入 col-sm-8 解决了宽度问题。我仍然想使用地图元素的相对高度（填充垂直空间）。
嗯，相对高度是什么？浏览器高度还是其他？
我想添加固定高度的页眉和页脚，并在中间有两列占据其余的垂直空间，左边的一列填充了地图。
您可以使用本示例中提供的代码。 jsfiddle.net/5V288/1025

标签： css twitter-bootstrap-3 maps here-api

【解决方案1】：

来自 HERE 支持的早期回复 "在地图对象初始化后试试这个：

window.addEventListener('resize', function () { map.getViewPort().resize(); }); 那应该可以解决问题。 How to redraw Here Map when container resizes?"

【讨论】：