OpenLayers 嵌入到带有导航栏的布局中；地图大小和锚

Question

我正在设计一个基于 GitLab 的 Jekyll Creative 主题的网站，我想在其中嵌入一张使用 OpenLayers 7.3.0 的地图。

主题有一个导航栏，高度为 50 像素，始终位于顶部。我希望地图使用导航栏下方的所有空间，即 100% 减去 50 像素。

我通过将以下样式应用于包含地图的空

div

来实现：

#map {
  /* configure the size of the map */
  width: 100%;
  height: 100%;
  /* padding for the nav bar */
  padding-top: 50px;
}

随着

padding-top

，地图的大小正确。然而，导航到

#map

将导航到填充的顶端，导致地图上方显示 50px 的条纹，而地图底部的相同数量的条纹被截断。 （此外，这会在地图上方给我 50 像素的空白空间，这可能也是不可取的。）

如何调整

div

的大小，使其内容高度比内容区域高度小50px，并获得某种将我带到地图顶部边缘的锚点？

Answer 1

CSS 提供了一种方法来进行这种计算。这将给出所需的结果：

#map {
  /* configure the size of the map */
  width: 100%;
  height: calc(100% - 50px);
}