Map height issue

[Fox71]

Hello All,

I am very new here and just starting to understand some concepts.

I am trying to develop a map and create a custom navbar at the top (probably using bootstrap). The problem is whenever I had a container at the top, my map extends below the page fold (I believe because the height is based on the viewport), and some scrollbars are added. I'd like to have the map just fit the space available on the screen once the navbar is added at the top. Here is a simple example using a paragraph block at the top:

https://codepen.io/Fox71/pen/abLjdyJ?editors=100

I have been stuck there for a while, any help would be great.

Thnaks!

Ben

[ReneRubalcava · Accepted solution]

You'll need to adjust some css to handle your layout.

You can look at flexbox for example.

I wouldn't apply it directly to the body, but would a container instead. This is how you can do it with the body.

body {
    display: flex;
    flex-direction: column;
}

[Fox71]

Thanks a lot, that put me on the right track! Perfect!