Mit Footer-DIV freien Platz füllen

tom_tom · 02.11.2012

Hallo
tommy_gFm ist wieder da, in neuem Gewand

Aus persönlichen Gründen hab ich leider keine Zeit mich irgenwie mit meinem Hobby zu beschäftigen, und wie das so ist hat sich inzwischen jemand an meinem Profil zu schaffen gemacht :hmpf:

Aber gut...
Im Moment arbeite ich an einem neuen Webauftritt der FF Stegersbach.

Folgende Situation:
Grundsätzlich ist die Seite in 2 Teile aufgeteilt: Header (fixe Höhe) - Content_Footer (besteht aus Content und Footer, Content: unterschiedliche Höhe; Footer: Mindesthöhe)

Genau dieser Footer (als div versteht sich) soll den freien Platz zwischen Seitenende und Content-Bereich (ebenfalls div) füllen.
Angenommen die Seite würde kleiner sein als der Bildschirm hoch ist, dann soll der Footer diesen Bereich eben füllen. Ist die Seite aber größer (-> scrollen) dann soll der Footer ledeglich seine Mindesthöhe haben.

Wie könnte man so etwas machen?

grüße aus dem Südburgenland,
Thomas

hub · 02.11.2012

AW: Mit Footer-DIV freien Platz füllen

Moin moin,
geht dein Footer über die gesamte Bildschirmbreite? Wenn ja, könntest du es z.B. mit

Code:

[SIZE=2][COLOR=#3f7f7f][B][SIZE=2][COLOR=#3f7f7f]html [/COLOR][/SIZE][/B][/COLOR][/SIZE][SIZE=2]{[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]    background-color[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]#000000[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2]; /* die Farbe deines footers */[/SIZE]
[SIZE=2]}[/SIZE]

erreichen.
Eine andere Idee hab ich im Moment nicht.

Gruß Ulli

tom_tom · 02.11.2012

AW: Mit Footer-DIV freien Platz füllen

Hoppla, hab ich hinschreiben vergessen

Also:
Header: Komplette Breite, fixe Höhe
Content: Breite: 900px, Höhe je nach Inhalt
Footer: Komplette Breite, Höhe: soll Bereich zwischen Content und Seitenende Füllen, mind. 200px wenn Content die Seite veranlasst zu scrollen

Deine Lösung ist ja eigentlich komplett einfach wenn mein Content kleiner ist als der Bildschirm, nur wie mach ich dass dann wenn die Seite größer wird?

Thomas

Moev · 02.11.2012

AW: Mit Footer-DIV freien Platz füllen

Hi,
Hast du irgend wie nen beispiel Link, wo du das grade testest?
Wäre super.
Eventuell geht es mit min-height oder max-height. versuch mal damit zu arbeiten.

Ist grade nur nen spontaner gedanke, werde es aber nochmal nachbauen und testen

hub · 02.11.2012

AW: Mit Footer-DIV freien Platz füllen

ich schon wieder

ich weiss nicht, ob es eine bessere lösung gibt. diese hier funktioniert unter den angegebenen Bedingungen, wenn ich sie richtig verstanden habe:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>div test</title>
<style type="text/css">
html {
 background-color: #000000;
}
body {
 padding: 0;
 margin: 0;
}
#wrapper {
 position: absolute;
 right: 0;
 bottom: 0;
 height:100%;
 width: 100%;
 overflow: auto;
}
#header {
 background-color: #FF0000;
 height: 100px;
}
#content-wrapper {
 background-color: #FFFFFF;
}
#content {
 background-color: #00FF00;
 width: 900px;
 margin: 0 auto;
}
#footer {
 min-height: 200px;
 background-color: #000000;
}
</style>
</head>
<body>
<div id="wrapper">
  <div id="header">
  </div>
  <div id="content-wrapper">
   <div id="content">
    ich bin der content. (mach mal n langen text rein ...)
   </div>
  </div>
  <div id="footer">
  </div>
</div>
</body>
</html>

Die fröhlichen Farben sind nur zum sichtbar machen :rolleyes:

.
wenn nicht, hier krach machen

.

Gruß Ulli

tom_tom · 02.11.2012

AW: Mit Footer-DIV freien Platz füllen

Nein leider, läuft alles über xampp am PC :hmpf:

Aber dank Ulli's Idee und Moev's Erweiterung hab ichs nun geschafft

Ich hab einfach noch beim footer-Div min-height:200px; hinzugefügt und schon tut das so wie ich will

Ich muss echt lernen einfach zu denken, ich denk immer viel zu kompliziert

Danke, das fertige Werk sollte man dann in einigen Wochen unter der Adresse:

Bitte kostenlos registrieren, damit du die Links siehst.

sehen können

Grüße
Thomas

hub · 02.11.2012

AW: Mit Footer-DIV freien Platz füllen

Na dann viel Spaß noch,
wir lassen uns überraschen

.
Wenns hängt, weißt du ja, wo du uns findest ...

Gruß Ulli