nicht angemeldet
Hallo Mike!
folgendes Problem. Ich will meine Seite zentrieren. Wird das Browser-Fenster verkleinert sollen die "margin"-ränder bis zur width des bodies gehen. Danach erscheint ein Scollbalken.
Du meinst, du möchtest dein Body-Element auf dem Viewport zentrieren. Dazu setzt du den linken und rechten Außenabstand auf "auto". Ist der Viewport schmaler als die von dir vorgebene Breite des Body-Elements, erscheint eine horizontale Scrollleiste.
Funktioniert alles super. Hier der Code:
html {background-color: lightblue; height: 100%;}
body {background-color: #ffb440; min-height: 100%; margin: 0px auto; padding: 0; width: 1000px; border: 1px solid black;}
Besser:
html, body {height: 100%; width: 100%; margin: 0; padding: 0;}
body {margin: 0 auto; width: 1000px; background-color: #ffb440; border: 1px solid black;}
( Ich weiß ich weiß, 1000px sind ungünstig für 800x600 Auflösung, aber es wird sonst einfach zu eng ;)).
Von den Benutzern mit mobilen Endgeräten wie Smartphones mal ganz zu schweigen ...! ;-)
Das min-height habe ich einfach mal zur Testweise herangezogen, allerdings ist mir nicht ganz verständlich wie das funktionieren soll. Der height von body richtet sich am der height vom HTML-Körper aus. D.h. minimiere ich das Fenster ist die neue Größe wieder 100% (eh klar).
Das 'min-height' ist hier m.E.n. überflüssig, denn das Root-Element des Viewports (und nicht "Fenster" oder "Bildschirm"), also der Anzeigebereich der Seite im Browser, ist das HTML-Element und dieses hat (automatisch) die entsprechenden Maße. Für die Vererbung im CSS sagst du dem Browser jetzt noch, dass diese Maße (Höhe + Breite) jeweils 100% entsprechen.
Somit sorgt ein 'body {height: 100%;}' eben auch dafür, dass das Body-Element so hoch ist, wie der Viewport. Und solange du nicht die Overflow-Eigenschaft auf 'hidden' setzt, vergrößert sich die Höhe des Body-Elements automatisch, falls der Inhalt es erfordert.
Deswegen schrumpft der "body" mit anstatt dass er einen Scollbalken erzeugt. (Ich will bei vollen Fenster das die Höhe das komplette Fenster(abhängig von der Auflösung) ausfüllt, und bei minimierten Fenster auf der Höhe des vollen Fenster stehen bleibt).
Das verstehe ich nicht ...!?
Aber das ist noch nicht das gröbste Problem *g*: Der body hat ja nun die position: static.
Ja, das ist der Defaultwert für position.
D.h ich kann keine weiteren Elemente nach ihm Ausrichten, da sich position absolute ja auf das nächst-höhere Element mit position:absolute bezieht.
Nicht ganz richtig. Es bezieht sich auf das nächste Eltern-Element dessen Wert für position nicht static ist, d.h. er kann u.a. auch 'relative' sein.
Dadurch passiert, wenn ich neue Elemente einfüge, dass sich die alten verschieben und der Aufwand wäre einfach zu groß sich damit rumzuspielen.
Elemente "ohne zwingenden Grund" aus dem "normalen Fluss" zu nehmen, war ist noch nie eine gute Idee gewesen. Belasse deine Elemente vom Grundsatz her im normalen Fluss, dann "ordnen" sie sich schon von alleine entsprechend an, sodass du dich auch nicht "damit rumspielen" musst.
Es muss leichter gehen.
Bestimmt! Was denn jetzt eigentlich?
Gruß Gunther