CSS und height 100%

[apeiros]

Hallo

Seit ich csszengarden.com gesehen habe, will ich endlich mal meine pages 100% per CSS formatieren und in HTML nur noch die physikalische Struktur machen.

Mein Problem bei der Umstellung:
Ich habe linksseitig eine navigationsspalte und rechtsseitig den content. Die naviagionsspalte soll so hoch sein wie die page (da sie einen anderen Hintergrund hat ist das zwingend). Die Höhenangabe 100% bezieht sich bei CSS aber dummerweise auf die Höhe des Browserfensters und nicht der Page - Resultat: wenn in content der Inhalt grösser als das Browserfenster ist (sprich scrollbars erscheinen) dann wird der Hintergrund bei der Navigation nicht fortgesetzt :-(

Um das ganze etwas Bildlicher zu machen:
es soll in etwa gleich aussehen, wie wenn ich links einen 140px breiten frame hätte und der frame rechts einfach den restlichen platz einnimmt.

Ich hoffe mal, ich hab mich nicht zu verwirrend ausgedrückt :-)

Kann mir jemand bei dem Problem helfen?

Grüsse
apeiros

[LANtastic]

So unnett es klingt, aber es gibt kein height:100%, welches sich auf die Gesamthöhe der Seite bezieht. Es gibt noch nicht einmal eine height:100% welches sich auf die Höhe des Fensters bezieht, wenn man ganz kleinlich ist.

Den hier solltest du dir mal durchlesen ... Der sollte helfen

Um dann z.B: einen Farbstreifen am linken Rand der Seite durchgängig erscheinen zu lassen, wirst du tricksen müssen.

Meistens sind es dann Seitenhintergrundbilder und keinen Hintergründbilder eines einzelnen DIVS, oder ähnlich.

[nurbs]

Hallo!

Vielleicht hilf dieser Trick! Hier ist die Navleiste jedoch nur so groß wie der Inhalt rechts daneben!

Also ich würde einen Container (in diesem Bsp: site) über die ganze Seite legen und diesen mit einer bestimmten Höhe definieren, jedoch mit einer Höhe die sich mit wachsendem Inhalt mitvergrößert! In diesen Container machen wir die zwei div (nav, content)

#site {
padding:0;
text-align:left;
height:600px;   // IE vergrößert den div sobald der Inhalt über die Höhe hinausgeht
}
html>body #site {
height: auto;  // Damit NN, Mozilla, usw. dies auch machen, schreiben wir hier min-height!
min-height:600px;
}
#nav{
float:left;
width:145px;
height:600px;  // Hier das selbe wie weiter oben
}
html> body #nav{
height:auto;  // Ebenfalls das gleiche
min-height:600px;
}

<div id="site">
  <div id="submenu">&nbsp;</div> <!--nav-->
  <div id="content"></div> <!--content-->
</div> <!--site-->

Hoffe geholfen zu haben

[LANtastic]

Die Lösung ist gut und funktioniert, aber es ist ja im Grunde genommen schon ein Hack nötig, um 100% Höhe zu erreichen., bzw. um vorzugaukeln diese 100% Höhe zu haben. Anders geht nicht.

[apeiros]

Also ich habs jetzt mit einem Seitenhintergrund gemacht.
Dass es in HTML kein height=100% gibts ist mir bekannt - aber bei CSS war ich bis jetzt zumindest der Auffassung, dass es dort height: 100% durchaus gibt. Siehe auch:

http://selfhtml.teamone.de/css/eigen...ung.htm#height
"Erlaubt ist eine numerische Angabe"
http://selfhtml.teamone.de/css/forma...htm#numerische
"Dabei sind absolute Angaben (z.B. Millimeter) und relative Angaben (z.B. Prozent gegenüber "normal") möglich."

Auch nurbs ein Dankeschön, ich werde deine Lösung bei Gelegenheit mal austesten

[LANtastic]

height:100% existiert : JA

Aber eben leider nicht in dem Zusmmenhang, wie du ihn gewünscht hast.