✔ div in div mit 100% höhe

S

stoneberg

Grünschnabel
Mahlzeit,

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

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

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

und CSS

Code: 
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
 
Hallo stoneberg,

PHP: 
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: 
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
 
fredolin hat gesagt.:
so würde ich die datei schreiben..

hab ich eben so einfach runtergeschrieben und im Browser nicht getestet..
Zum Vergrößern anklicken....
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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück