Vertikales Menü über ganze Bildschirmhöhe

html.de-Forum HTML, XHTML & CSS
1

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

2

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ß.

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

Wenn ich „height“

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

3

Ich habe mal ein Bild anbeigelegt. (die roten Rahmen, sind nur auf dem Bild).
[ATTACH=full]4439[/ATTACH]
Gruß Heiko

4

Probier mal ob es so aussehen soll.

<!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>
5

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 .

Gruß Heiko

6

Bei mir ist alles valide CSS3/HTML5
Warum wird

    50 mal kopiert?

7

Das stimmt ja auch, er hat nur seine Aussage mit

berichtigt:

…Vllt. von ihm als Beispiel, dass dein Skript funktioniert, egal wie viel Text in der Box ist

8

Das ist ein simples Flex-Layout.
http://codepen.io/anon/pen/jAKRNZ

9

Hallo

Schummeln gildet nich.

Gruss

MrMurphy

10

Moin,

Hmm, ich hatte die CSS-Datei meiner Seite vorhin dem Validator vorgeworfen und da hat der gemeckert.

Um zu testen, was passiert wenn mehr Einträge vorhanden sind als auf dem Bildschirm platz haben.

Gruß Heiko