Search code examples
htmlcssanchoropenlayers

OpenLayers embedded in layout with navigation bar; map size and anchor

I am designing a web site based on GitLab’s Jekyll Creative theme, into which I want to embed a map using OpenLayers 7.3.0.

The theme has a navigation bar, 50 px in height, that stays on top all the time. I want the map to use all the space below the navigation bar, i.e. 100% minus 50 px.

I have achieved that by applying the following style to the empty div which holds the map:

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

With the padding-top, the map has the correct size. However, navigating to #map will navigate to the top end of the padding, causing a 50px stripe to show above the map while the same amount of the map is cut off at the bottom. (Also, this will give me 50px of blank space above the map, which might not be desirable either.)

How can I size the div so its content height will be 50px less than the content area height, and get some kind of anchor which takes me to the top edge of the map?

Solution

  • CSS provides a way to do that kind of calculation. This will give the desired result:

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