body {position: relative;} ... dann knallt's woanders ;-)

[Rolf B]

Hallo Linuchs,

ist doch klar.

Die Map ist position:absolute, und du verwendest top, left, right und bottom, um ihre Grenzen festzulegen.

Der Bezugspunkt für diese Werte wird entlang der Elternhierarchie gesucht, er ist das erste positionierte Element (d.h. alles außer dem Defaultwert position:static).

Dein Body hat eine Höhe von 18px. Vermutlich wegen des einsamen   darin, das nicht aus dem Flow hinauspositioniert oder versteckt wird.

Ohne position:relative am body orientiert sich die Map am Viewport.

Lösung:

body { 
   height: calc(100vh - 1em);
}

Minus ein emm wegen des Margins am Body. Sonst ist der Body zu hoch und es gibt rechts einen Scrollbar.

Rolf