[Gelöst] map height = calc(100vh – 73px)

[Author]

Artikel

[romanB-3]

Hello,
In order to have the map full height, I set up a map height of calc(100vh - 73px), which works ok.
Still, the container of the map still is 100vh, so I got a page higher than its actual content.
How could I correct this ?
Thank you.

[Waqar]

Hi Roman,

Thank you for waiting.

During troubleshooting, I noticed that the vertical scroll bar on the page is not showing because of the map, but it is the result of two instances of inline "height:100vh;" styles.

Screenshot 1: versteckter Link
Screenshot 2: versteckter Link

Instead of adding inline height styles, you can include a special class "matchPageHeight" to these two div tags and add the following custom CSS code in the view's "éditeur CSS":

@media only screen and (min-width: 768px) {
.matchPageHeight {
  height: calc(100vh - 73px) !important;
}
}

Note: To check which CSS code is applying to different page elements, you can use Google Chrome's inspect element tool, as explained in this guide:
versteckter Link

regards,
Waqar

[romanB-3]

My issue is resolved now. Thank you!