Mahlzeit,

ich stehe gerade voll auf den Schlauch. Ich habe folgender HTML code

HTML-Code:

<div id="wrapper">
  <div id="navi">
    ....
  </div>

  <div id="content">
    .....
  </div>
</div>

und CSS

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

div#wrapper{  overflow: auto;  width: 800px;   margin: 0px auto; }   div#navi {  float: left;  width; 160px; }   div#content {  float: left;  width: 720px; }

wie krieg ich es hin, dass div#navi immer 100% hoch ist?
Was muss ich alles beachten?

height: 100%, min-height: 100% bewirkt bei mir gar nix...

Vielen Dank schon mal im voraus

Google-Suche brachte mir folgendes:
http://www.jex-treme.de/forum/archive/18735/thread.html

Sollte doch das gleiche Problem in Etwa sein?

Hi,

schau dir mal mein CSS-Tutorial CSS-Layout mit 100%-Höhe an.

mfg Maik

Hallo stoneberg,

PHP-Code:

div#wrapper{
 overflow: auto;
 width: 800px;
  margin: 0px auto;
}

div#navi {
 float: left;
 width; 160px;
}

div#content {
 float: left;
 width: 720px;
} 


das ist ja dein Posting..

mach es doch einfach so

PHP-Code:

div#wrapper{
 overflow: auto;
 width: 800px;
  margin: 0px auto;
}

div.navi {
 margin: 0;
 padding: 0;
 float: left;
 width: 160px;
 height: 100%;
}

div.content {
 margin: 0;
 padding: 0;
 float: left;
 width: 720px;
}

HTML Seite
<div id="wrapper">
    <div class="nav">Hier stehen die Navigationspunkte</div>
    <div class="clear"></div>
    <div class="content">Hier wird deinen Seiteninhalt angezeigt</div>
    <div class="clear"></div>
</div> 


so würde ich die datei schreiben..

hab ich eben so einfach runtergeschrieben und im Browser nicht getestet..

MFG
fredolin

Zitat von fredolin

so würde ich die datei schreiben..

hab ich eben so einfach runtergeschrieben und im Browser nicht getestet..

Das solltest du aber vielleicht besser machen, wenn du dir deiner Sache nicht sicher bist, und deinen Quellcode als vermeintlichen Lösungsvorschlag anbietest, denn von einem zweispaltigen, geschweige denn von der gewünschten 100%-Höhe ist damit nichts zu erkennen.

mfg Maik

Vielen dank für eure Antworten, habs leider noch nicht geschafft.

@Maik
Dein Tutorial kenn ich bereits, hat mir jetzt in diesem Fall nicht weiter helfen können.

Giebt es da evtl. probleme weil #navi und #content dynamischer Inhalt bekommt, resp der wrapper keine höhen Angaben hat?

Mein Ziel wäre, dass #navi ein border-right bekommt das sich von oben nach unten zieht.

MFG

stoneberg

Mein Tutorial hilft dir hier in diesem Fall sehr wohl weiter - ansonsten würde ich es dir nicht empfehlen

Studier mal die 4 Beispiel-Varianten im Attachment genauer, wie ich darin die Spaltenhintergründe erzeugt habe.

Diese Technik nutzt du genauso, nur dass du stattdessen mit einem Hintergrundbild den rechten Rahmen für die Navigation erzeugst.

mfg Maik

Danke nochmals

Ok das mit dem Hintergrundbild, so schlau war ich auch schon Dachte es würde evtl auch ohne Grafiken gehen.
Giebt es keine Möglichkeit, das Element 100% in der Höhe, des übergelegenen Elements zu orientieren?

MFG

stoneberg

Es lässt sich im Viewport nur das Elternelement mit einer "tatsächlichen" 100%-Höhe ausstatten, die sich dann vom oberen bis zum unteren Fensterrand erstreckt.

Ansonsten würden seine Nachfahren mit einer height:100%-Deklaration von Beginn an ohne jeglichen Inhalt über seinen unteren Rand hinausreichen, wenn zu Beginn ein Header-Bereich ausgezeichnet ist, und die darunterfolgenden Spaltenblöcke die restliche Höhe ihres Elternelements einnehmen sollen. Dieser "Versatz" entspricht dann der Höhe des Headers.

Wenn du dies grafiklos umsetzen willst, studier mal den Artikel AnyColumnLongest, der noch weitere technischen Möglichkeiten nennt, um sog. "Equal-Height-Columns" in einem Layout zu realisieren.

Achja, die Grafikdimension würde in deinem Fall 1*1px betragen, wenn der Rahmen 1px stark ist, und keine weiteren Spaltenhintergründe erwünscht sind.

mfg Maik

Das hat ich befürchtet

Danke dir vielmals