CSS mit voller Bildschirmhöhe

[Michael_f1900a]

Versuche eine Homepage div’s auf die ganze Bildschirmlänge zu kiegen. Wenn der Text nicht die ganze Bildschirmhöhe füllt sollte automatisch bis zum unteren Bildschirmrand aufgefüllt werden.

Wenn ich html auf height:100% setze scheint es zwar zu funtkionieren jedoch bleibt das #mainnavi an ort und stelle stehen bei scrollen längerer seiten. Dieses sollte fixiert sein und sich mit dem rest der seite bewegen. Zum anderen wird die Farbe im div#container nicht bis ganz unten angezeigt.

Evtl. kann mir ja hier jemand weiterhelfen?

Vielen Dank im Voraus für euer Feedback
Michael Oppliger

Momentan sieht mein style.css so aus:

html,body{margin:0;padding:0;color: #002262; overflow-y:scroll; background-image:url(Bilder_neu/Background_Seite.jpg);height:auto;}
body{font: 76% arial,sans-serif;text-align:center; height:100%};
p{margin:0 10px 10px}
div#header{}
div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;}
div#container{text-align:left;background-image: url(Bilder_neu/Background.jpg);background-color:#A9C4E2; background-repeat:no-repeat;position:arelative;width:1024px;margin:0 auto; height:auto; height:100%; min-height:100%;}
div#content p{line-height:1.4;}
div#footer{width:1024px; clear:both;background-color:#A9C4E2;}
div#footer p{margin:0;padding:5px 10px;}
div#content{float:right;width:700px;padding:1em 1em 5em;}

div#extra{
float:right;
width:200px;
padding-right: 20px;
}

#mainnavi {
list-style: none;
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #002262;
border-right: none;
border-left: none;
border-bottom: none;
border-top: none;
bgcolor:#b6dcee;
position:absolute;
top: 70px;
width: 230px;
}

[Efchen]

Moin!

Gleich zu Beginn möchte ich auf Dein Subject eingehen.
Das geht nicht. CSS hat keine Ahnung, wie groß der Bildschirm ist. Es gibt keine Einheiten, die auf die Bildschirmgröße referenzieren.

Viele Leute vergessen immer, dass
a) der Bildschirm nur die maximale größe nach oben begrenzt
b) ein Browserfenster nicht maximiert sein muss
c) die wenigsten Nutzer wirklich den Vollbild-Modus nutzen
d) deswegen selbst ein maximiertes Browserfenster einen Viewport hat, der viel kleiner ist, als das was die Bildschirmgröße (Auflösung) hergibt. Der Platz wird beschränkt durch Tool-, Menü- und Sidebars.
e) der Viewport die entscheidende Größe ist und der quasi immer kleiner ist, als die Auflösung, meistens deutlich kleiner.

CSS kann natürlich auf die Größe des Viewports referenzieren. Wenn die Elemente body und html auf 100% Höhe aufgezogen werden, können sich alle Kindelemente danach ausrichten. Denn bei allen anderen Elementen gilt ja: Die Größe (height) bezieht sich immer auf die Größe des Elternelements.

Versuche eine Homepage div’s

Was hoffentlich nicht heißt, dass Du Dein Layout mit divs machst.
Layout macht man mit CSS. Das Element div dient dazu, mehrere Elemente zu einer logischen Gruppe zusammenzufassen. Layout mit divs ist genau so falsch wie Layout mit Tabellen.

auf die ganze Bildschirmlänge zu kiegen.

s.o.

Wenn ich html auf height:100% setze scheint es zwar zu
funtkionieren jedoch bleibt das #mainnavi an ort und stelle
stehen bei scrollen längerer seiten.

Na logisch. Das ist das normale Verhalten. Du hast ja auch keine Aktionen unternommen, um das Verhalten zu ändern.

Dieses sollte fixiert
sein und sich mit dem rest der seite bewegen.

Wenn es fixiert ist, dann bewegt es sich ja nicht.
position:fixed ist, was Du suchst. Funktioniert aber nicht in älteren Internet Explodern.

Außerdem sind fixierte Elemente eine große Platzverschwendung, insbesondere in kleinen Viewport wie z.B. Netbooks. Deswegen sollte man sich überlegen, ob man das wirklich so macht.

Zum anderen wird
die Farbe im div#container nicht bis ganz unten angezeigt.

Die Farbe erstreckt sich über die volle Höhe des Containers. Das Bild aber nicht.

Evtl. kann mir ja hier jemand weiterhelfen?

Für detailliertere Probleme oder Antworten wäre ein Link zur Seite ratsam.

Für Dich wäre ein Webdeveloper-Tool empfehlenswert, z.B. Firebug für Firefox.

div#container{text-align:left;background-image:
url(Bilder_neu/Background.jpg);background-color:#A9C4E2;
background-repeat:no-repeat;position:arelative;width:1024px;mar
gin:0 auto; height:auto; height:100%; min-height:100%;}

Da ist ein position:arelative

div#content p{line-height:1.4;}

1.4 was? Ochsenfrösche? Pixel? em? Stück Schokolade?

font-size: 12px;

Lässt sich in älteren IE leider nicht skalieren. Die ideale Einheit für Schriftgrößen ist „em“.

border-right: none;
border-left: none;
border-bottom: none;
border-top: none;

Kürzer? border:0;

Ansonsten: Ein CSS-Code ist ohne dazugehöriges HTML wertlos.

Liebe Grüße,
-Efchen