✔ Content Div nach unten automatisch vergrößern

[splat]

Hallo,

ich komme mal wieder nicht weiter
Bisher habe ich folgendes Layout:

+---+----------+---+
|   |          |   |
|   |          |   |
|   |          |   |
|   |          |   |
|   |          |   |
|   |          |   |
+---+----------+---+

3 Div Container (page_border_left, page_content, page_border_right)
Das befindert sich immer zentriert im Fenster und erstreckt sich bereits über eine Höhe von 100%.

Der mittlere Container soll nun so genutzt werden:

+----------+
|  header  |
+----------+
|          |
|          |
|  content |
|          |
|          |
|          |
+----------+
|  footer  |
+----------+

Soweit so gut... aber wie bekomme ich das div "content" (grüner Kasten im Bild) nun dazu, dass es automatisch die maximal verfügbare Größe des Fensters annimmt?

Und hier noch der jetzige Code:

html, body {
	height: 100%;
	margin: 0px;
}

body {
	background-image: url(bg.gif);
	background-position: center;
	background-repeat: repeat-xy;
}

#page_container {
	width: 900px;
	margin: auto;
	height: 100%;
}

#page_border_left {
	width: 100px;
	height: 100%;
	float: left;
	background: orange;
	
}

#page_content {
	width: 700px;
	height: 100%;
	float: left;
	background: #d3d8f0;
	
}

#page_border_right {
	width: 100px;
	height: 100%;
	float: right;
	background: green;
}

#header {
	width: 700px;
	height: 150px;
	background: #ff0000;
}

#content {
	width: 700px;
	background: #00ff00;
}

#footer {
	width: 700px;
	height: 150px;
	background: #0000ff;
}

Gruß
Marc

 

[Maik]

Hi,

vielleicht helfen dir die angehängten Beispiele in meinem CSS-Tutorial CSS-Layout mit 100%-Höhe weiter?

 

[splat]

Hallo Maik

dein Tutorial habe ich mir angesehen, doch befinden sich bei mir header und footer ebenfalls innerhalb der Rahmen. Da klappt das leider nicht so ganz
Die Seite ist bei mir soweit schon auf 100% vergrößert, aber das Content Div bekomme ich nicht so hin, das es den freien Platz voll ausnutzt.

Hast du da vielleicht einen Tip für mich?

Gruß
Marc

 

[Maik]

Hi,

lad doch mal deine Seite incl. aller Grafiken hier als ZIP-Datei hoch, dann schau ich mal, was sich da machen lässt.

 

[splat]

Hi

du bist ja schneller mit dem Antworten als die Polizei erlaubt!
Habe leider gerade nichts da. Werde später mal alles hochladen, wenn ich wieder auf der Arbeit bin.

Gruß
Marc

 

[Maik]

Zum Glück ist hier im Forum keine "Blitzfalle" aufgestellt. :suspekt:

Kein Problem, wenn du die Dateien gerade nicht zur Hand hast, der Tag ist ja noch lang.

 

[splat]

Hallo Maik,

so.. Ich habe dir das jetzige Layout mal hochgeladen.
Also wie gesagt, den grünen Bereich würde ich gerne strecken lassen..
Vielleicht kommst du ja eher auf eine Idee wenn du es dir live ansiehst

Gruß
Marc

 

[Maik]

Hi,

das hat auf Anhieb so funktioniert, wie ich mir das vorgestellt hatte.

 

[splat]

Ich glaube ich muss mir bei Gelegenheit position: relative / absolute genauer ansehen, da steige ich noch nicht so ganz durch. Und padding-bottom beim Footer war wohl mein Problem

Noch eine kurze Frage:
Firefox und IE 5.5 - 7 zeigen mir das Layout korrekt an (super Sache ), jedoch wird im IE beim Ändern der Fenstergröße day Layout nicht aktualisiert (footer). Der FF hingegen macht dies. Liegt das am CSS? Oder ist der IE einfach nur mal wieder zu doof dafür? ;-)

Vielen Dank nochmal!!
Marc

 

[Maik]

Hi,

so gesehen ist der IE zu doof dafür, aber ich hab ihm jetzt etwas Nachhilfe in CSS gegeben.