Hallo,
das kannst du mit "position: fixed;" erreichen.
Allerdings solltest du dir vorher darüber im klaren sein, das die Teile, die sich außerhalb des Fensters befinden, auch dort bleiben. Die Karte wird dann nicht mehr erreichbar sein. Gleiches gilt für kleinere Fenster auch für den unteren Teil der Navigation.
Benutzerfreundlicher ist deshalb die aktuelle Darstellung.
Nachfolgend mal ein Beispiel, das einmal die Anwendung von "position: fixed;" zeigt, aber auch das Problem mit langen fixierten Spalten:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
<title>Fixe Navigation vertikal</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
<style>
/* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
padding: 0;
positon: relative;
}
nav {
position: fixed;
right: 2rem;
}
main {
margin-right: 12rem;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Banane</li>
<li>Kirsche</li>
<li>Pflaume</li>
<li>Kiwi</li>
<li>Ananas</li>
<li>Erdbeere</li>
<li>Mango</li>
<li>Heidelbeere</li>
<li>Haselnuss</li>
<li>Grünkohl</li>
<li>Kartoffel</li>
<li>Senf</li>
<li>Nusscreme</li>
<li>Brot</li>
<li>Mandelhörnchen</li>
<li>Schillerlocke</li>
<li>Klopse</li>
<li>Butter</li>
<li>Käse</li>
<li>Rotkohl</li>
<li>Spargel</li>
<li>Speck</li>
<li>Currywurst</li>
<li>Erbsensuppe</li>
<li>Bohne</li>
<li>Tomate</li>
<li>Wasser</li>
<li>Milch</li>
<li>Gurke</li>
<li>Orange</li>
<li>Pfeffer</li>
<li>Kassler</li>
<li>Rettich</li>
<li>Haferschleim</li>
<li>Müsli</li>
<li>Zwiebel</li>
<li>Corn Flakes</li>
<li>Vanille</li>
<li>Champignon</li>
<li>Honigmelone</li>
<li>Pistazie</li>
<li>Kümmel</li>
<li>Salz</li>
<li>Zucker</li>
<li>Hefe</li>
<li>Karotten</li>
</ul>
</nav>
<main>
<article>
<h1>Ich bin Text</h1>
<p>Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund! « sagte er, es war, als sollte die Scham ihn überleben.</p>
<p>Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte.</p>
<p>»Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab.</p>
<p>In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!</p>
<p>« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.</p>
<p>Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat.</p>
<p>Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren.</p>
<p>Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund! « sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte.</p>
</article>
</main>
</body>
</html>Gruss
MrMurphy
Hallo,
meinst du wie hier im Editor, wenn der Inhalt zu hoch für die Fensterhöhe wird?
Das ist möglich mit der CSS-Anweisung "overflow", siehe zum Beispiel
http://www.thestyleworks.de/ref/overflow.shtml
Das ist aber schlechter Stil und sollte vermieden werden. Online-Editoren sind eine Ausnahme, damit die obere Symbolleiste nicht zu weit nach oben entschwindet.
Ansonsten sind zwei oder mehr Scrolleisten eher nervig. Nicht alles was möglich ist, ist bei Webseiten auch sinnvoll.
Außerdem kann es zu Problemen bei kleineren Fenstergrößen und Touchscreens kommen. Das solltest du also unbedingt testen, wenn du auf overflow nicht verzichten magst.
Gruss
MrMurphy
Hier mal eine Erklärung und ein Ansatz.. 
http://codepen.io/wolf-w/full/vOKyxw/
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!