100% höhe funktioniert nicht

[Bachelor]

hallo zusammen,

habe einen div-container „site“ welcher alle Elemente meiner Seite beinhaltet (header, nav, content…). dieser „site“ Container hat noch einen Eltern Container „shadow“, welcher ein bisschen breiter ist, wie „site“ um einen Schatten um die Seite zu legen. Der Container „shadow“ mit seinen ganzen Kind-Elementen ist mittig zentriert und hat eine feste Breite (was auch wunderbar funzt). Nun möchte ich gerne die höhe auf 100% setzen, was aber nicht funktioniert. Vielleicht kann mir jemand sagen, woran es liegen könnte. hier ein bisschen code:

css:

body {
background-color: #252525;
background-image: url(…/img/bg_body.png);
background-repeat: repeat-x;
padding: 0px;
margin: 0px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#site {
background-image: url(…/img/bg_nav_left.png);
background-repeat: repeat-y;
height: 100%;
width: 996px;
margin-left: 12px;
margin-top: 0;
border-right: 2px solid;
border-left: 2px solid;
border-bottom: 2px solid;
border-color: gray;
}

#shadow {
background-image: url(…/img/shadow.png);
background-repeat: repeat-y;
height: 100%;
width: 1024px;
margin: 0px auto;
margin-top: 0;
}

gruß,

[jzjaberg_a2f367]

Hallo Bachelor,

die Höhe eines Div-Containers richtet sich immer nach seinem Inhalt wenn sie nicht explizit in Pixel angegeben ist.
Da bedeutet, dein DIV ist immer so hoch wie die Anzahl der sich darin befindenden Textzeilen.
Beispiel: Wenn du 10 Zeilen Text mit einer Zeilenhöhe von 24 Pixeln im DIV hast, sind 100% Höhe genau 240 Pixel.
Wenn du als 100% die Größe des Browserfensters haben willst, musst du diese vorher ermittlen und an das DIV übergeben.

Gruß Jörg

[Bachelor]

Guten Tag,

wie mache ich das? Es sollte sich auch beim skallieren des Browserfensters anpassen.

Gruß

[RakonDark_2d341e]

margin: 0px auto;

funktioniert das auch im IE ?
oder kann es sein das es dort nicht zentriert ist ?

[Yasmin_a87af0]

Hallo Bachelor,

gib mal zusätzlich dem body und dem html selbst eine Höhe von 100%.

Schöne Grüße
Yasmin

[jzjaberg_a2f367]

Hallo,

da gibt es im www einige fertige Scripte. So auf die Schnelle weis ich es auch nicht auswendig. Am besten mal danach Googeln.

Gruß Jörg

[Bachelor]

Hey Yasmin,

danke für die Antwort, geht super! Bis auf der Haken, das wenn der Inhalt nun größer ist als 100% - Browserfenster, dann wächst mein Container und damit das bg_image nicht mit

hast du dafür einen rat? min-height hab ich versucht, geht aber leider nicht…

Gruß

[Bachelor]

im IE8 geht das… für andere Versionen noch nicht getestet…

Gruß,

[RakonDark_2d341e]

hintergründe sind nicht skallierbar. Es kann nur wiederholt werden.

[RakonDark_2d341e]

im IE8 geht das… für andere Versionen noch nicht getestet…

Gruß,

atimt, ich war mal wieder im quirks modus

[Bachelor]

so war das nicht gemeint… Habe mich vielleicht ein bisschen ungenau ausgedrückt. Der Parent-div-container wird nicht größer, wenn ich height auf 100% habe bleibt er auch auf 100%, egal wie groß ein Kind-container wird.

[Yasmin_a87af0]

Hallo,

min-height hab ich versucht, geht
aber leider nicht…

vielleicht die height vergessen?

height:auto !important;
height:100%;
min-height:100%;

Die erste height ist für die guten Browser, die zweite für den IE6 (der min-height nicht interpretiert). Damit die guten den richtigen Wert nehmen der Trick mit dem !important (was der IE6 auch nicht interpretiert).

Schöne Grüße
Yasmin

[Efchen]

die Höhe eines Div-Containers richtet sich immer nach seinem
Inhalt wenn sie nicht explizit in Pixel angegeben ist.

Das ist falsch. Gibt man einem Element eine Höhe in %, so richtet sie sich nach der Größe des Elternelements.

height:100%;
heißt also, das Element ist so groß wie das Elternelement.

Beispiel: Wenn du 10 Zeilen Text mit einer Zeilenhöhe von 24
Pixeln im DIV hast, sind 100% Höhe genau 240 Pixel.

Dazu kommen dann noch margins, paddings und borders
Abgesehen davon hat man nie Text im div, weil div eine logische Gruppe auszeichnet, aber keinen Text. Dazu gibts das Tag .

Wenn du als 100% die Größe des Browserfensters haben willst,
musst du diese vorher ermittlen und an das DIV übergeben.

Auch falsch. Man gibt einfach allen Elementen im Spiel die Höhe 100% und dem eigentlichen Element auch, dann klappts auch. Gemeint sind natürlich die obersten Elemente „body“ und „html“ - aber ich bin sicher, die Antwort steckt im anderen Teil des Threads, den ich noch nicht gelesen habe.

Grüße,
-Efchen

[Efchen]

Moin,

Bis auf der Haken, das wenn
der Inhalt nun größer ist als 100%

Da wäre es günstig, zu wissen, was das „Box Model“ ist und wie es funktioniert. Dann weiß man, dass nicht allein „height“ die Größe eines Elements bestimmt, sondern die Summe aus

margin-top

• border-top
• padding-top
• height
• padding-bottom
• border-bottom
• margin-bottom

Vermutlich sind die margins/paddings/borders bei Dir nicht 0, dann ist das Element bei height:100% natürlich größer als der Viewport.

Grüße,
-Efchen

[Bachelor]

Guten Tag,

nein… bei 100% height wird auf 100% der höhe skalliert. Das klappt auch gut so. Wenn nun aber mein „Lorem Ipsum“ mehr höhe benötigt wie mein „Mutter-Container“, dann schießt der Text über den Container hinaus, ohne das der „Mutter-Container“ mitwächst. Die 100% bleiben die 100% höhe des Browsers…

[Bachelor]

ok, das werde ich heute abend mal ausprobieren. Allerdings werde ich bei den Browsern, welche nur „height“ interpretieren können das gleiche Problem haben wie vorher oder nicht?! Es soll ja nur die mindest Höhe auf 100% sein und dann mitwachsen und nicht auf dieser höhe einfrieren… Bestmöglich in allen gängigen Browsern

[Efchen]

Skaliert wird da nichts. Die Größe richtet sich nach der Größe des Elternelements.
Wenn Dein Inhalt zu groß ist, geht er darüber hinaus, das ist richtig. Was soll denn auch sonst passieren? Was nicht rein passt, geht darüber hinaus, denn der Inhalt nimmt eben immer so viel Platz ein, wie er braucht.

Was Du suchst, ist „overflow:auto“, damit werden in Elementen mit fester Größe Scrollbalken angezeigt, wenn der Inhalt nicht in diese Größe reinpasst.

[Yasmin_a87af0]

Allerdings werde ich bei den Browsern, welche nur „height“ interpretieren können das gleiche Problem haben wie vorher oder nicht?!

berechtigter Einwand. Ich vergaß zu erwähnen: Der IE6 interpretiert „height:100%“ wie „height:auto“, d.h., er überdehnt ein Objekt bei übergroßem Inhalt.

Schöne Grüße
Yasmin

[Efchen]

Tach,

wo es immer gute und kompetente Praxistipps für die gängigsten Probleme gibt, ist http://www.ohne-css.gehts-gar.net/
Vielleicht findest Du da etwas, das Dir hilft. Ich habs jetzt auf die Schnelle nicht gefunden, weiß aber, dass der Autor es drauf hat.

Grüße,
-Efchen

[Bachelor]

Wenn Dein Inhalt zu groß ist, geht er darüber hinaus, das ist
richtig. Was soll denn auch sonst passieren?

Nunja, wenn ich keine feste Größe einstelle dann wächst mein div automatisch mit. Wäre nett, wenn das auch bei einer Mindesthöhe funktionieren würde. Doch leider bekomme ich z.Z. nur entweder eine feste Höhe hin, oder eine variable, allerdings ohne mindesthöhe (unter Umständen kleiner wie 100% Browserfenster).

Was Du suchst, ist „overflow:auto“, damit werden in Elementen
mit fester Größe Scrollbalken angezeigt, wenn der Inhalt nicht
in diese Größe reinpasst.

Wenn dann sollte man schon die ganze Seite Scrollen können und nicht nur den div mit dem Content… Finde ich unschön… Also ich meine einen Scrollbalken vom Browser an der Seite und nicht im div

Gruß