I have an OpenLayers map with the following css:

.map {
    height: 100%;
    width: 100%;

However the map does not fill the whole screen, and it stays like this (take a look at the bottom):

Map image

Guess it is due to a ratio issue but don't know how to solve it.

Any idea of how to force the map to fill the whole screen?


To fit the map to the full screen in Openlayers, you should adjust your css code like this:

#map {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  • With this CSS how can you overlay something? Jul 23 at 8:52
  • Can you explain, what exactly you try to achieve?
    – gHupf
    Jul 26 at 7:31
  • I needed in info box to overlay over the map. But I fixed that using z-index Aug 2 at 15:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.