• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Vertikales Menü über ganze Bildschirmhöhe

Status
Für weitere Antworten geschlossen.
D

Die_Supernase

Neues Mitglied
Moin,
ich soll als Inhaltsverzeichnis einer CD eine HTML-Seite erstellen.
Was jetzt nicht so schön ist, ist dass das Menü an der linken Seite je nach Bildschirmauflösung unterschiedlich hoch ist.
Ich habe Links 3 DIVs.
Einen der die anderen beiden aufnimmt. Einen mit einer Höhe von 8em für ein Logo und im zweiten die Navigation.
Diese soll sich nur auf der Bildschirmseite befinden ohne das man die Seite scrollen muß.
Meine Lösung zur Zeit eine feste Höhe von "70em" und ein "overflow-y :scroll".
Die "70em" sehen aber auch jeder anderen Bildschirmauflösung anders aus.
Wie bekomme ich die Navigation daza, das sie wirklich immer bis zum unteren Rand des Bildschirms geht und die Scrollfunktion erhalten bleibt?
Wenn ich "height" auf "100%" setze, wird das Menü mehrere Bildschirmseiten lang ;-(

Irgendwelche Ideen?

Gruß Heiko
 
Hallo

Ich verstehe nur ansatzweise was du erreichen möchtest.

Hast du einen Link zu deinen bisherigen Bemühungen? Das würde wohl zum Verständnis beitragen.

Diese soll sich nur auf der Bildschirmseite befinden ohne das man die Seite scrollen muß.
Zum Vergrößern anklicken....

Wenn der Text größer als die Bildschirmseite ist muss gescrollt werden, da hilft nichts.

Wenn ich "height"
Zum Vergrößern anklicken....

Höhenangaben führen, grade bei Anfängern, fast immer zu Stress. Sie sind in der Regel auch überflüssig. Die Höhe von Containern wird durch ihren Inhalt bestimmt.

Gruss

MrMurphy
 
Probier mal ob es so aussehen soll.
Code: 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

<style>
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}

body:before {
content:"";
position:absolute;
top:0;
height:8em;
width:300px;
background:url(bild1.jpg) no-repeat center;
}
nav {
position:relative;
top:8em;
 left:0;
height:calc( 100% - 8em );
width:300px;
overflow-y:scroll;
background:#aaa;
}
</style>

<title></title>


</head>
<body>
<nav>
<ol>
<li><a href="">mechaniche Zeichnungen</a></li>
</ol>
</nav>
</body>
</html>
 
Zuletzt bearbeitet:
Das macht was ich will, auch wenn die Zeile 41 50x kopiert wird.
Jetzt muß ich das nur in meine Dateien umsetzen.
Lt. Validator gibt es kein height:100% mehr in <body>.

Gruß Heiko
 
djheke schrieb:
Bei mir ist alles valide CSS3/HTML5
Zum Vergrößern anklicken....
Das stimmt ja auch, er hat nur seine Aussage mit
Die_Supernase schrieb:
Wenn ich "height" auf "100%" setze
Zum Vergrößern anklicken....
berichtigt:
Die_Supernase schrieb:
Im Validator steht, es gibt kein height=100%-Attribut mehr in <body>.
Zum Vergrößern anklicken....



djheke schrieb:
Warum wird <ol> 50 mal kopiert?
Zum Vergrößern anklicken....
...Vllt. von ihm als Beispiel, dass dein Skript funktioniert, egal wie viel Text in der Box ist
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben