Footer hängt bei 'besonderen' Browsergrößen in der Luft

Status
Nicht offen für weitere Antworten.
W

WIK-Lars

Erfahrenes Mitglied
Hallo,

bei dieser Website wird bei 'besonderen' Browsergrößen der Footer nicht am unteren Browserrand ausgerichtet, so wie es bei 'normalen' Dimensionen wie z.B. 1024*768px oder 1280*800px der Fall ist. Wenn ich mir die Seite etwa am Mac anschaue oder an so einem quadratischen Bildschirm (weiß leider gerade nicht die genaue Größe) von einer Kollegin, dann steht der Footer ein gutes Stück oberhalb des unteren Browserrandes.

Ich habe es mit der Wrapper-Methode mal probiert, der Sache Herr zu werden. Jedoch hat mir das komplett mein Layout zerschossen, wenn ich eine wrap-Klasse um meine Seite gebaut habe - ohne den Footer natürlich.

Kann mir da jemand weiterhelfen?
Vielen Dank schon mal im voraus!!
 
Hi,

mit der folgenden Grundtechnik wird der Footer in allen, sprich auch in den "besonderen" Bildschirmauflösungen am unteren Fensterrand ausgerichtet:

Code: 
* {
margin:0;
padding:0;
}

html,body {
height:100%;
}

#wrapper {
position:relative;
height:100%;
}

#footer {
position:absolute;
bottom:0;
width:100%;
height:25px;
background:#003366;
color:#fff;
}
Code: 
<body>
      <div id="wrapper">
           <div id="footer">footer</div>
      </div>
</body>
 
Hi Maik,

dank Dir für Deine Antwort!

Interessanterweise klappt es ganz gut, wenn ich den CSS-Code wie vorgeschlagen anpasse, aber im HTML-Code keine extra wrapper-Klasse erzeuge. Es wird dann ja der Footer noch mal entsprechend durch position:absolute und bottom:0 an den unteren Bildschirmrand gerückt. Es sieht dann so aus, was ja bis auf den Abstand zwischen Content und Footer schon mal wie gewünscht ist.

Setze ich die wrapper-Klasse ein, ist's so.
 
Das #wrapper-DIV muss das komplette Seitenlayout und nicht nur den Footer umschliessen. Daher auch die height:100%-Angabe für das Element, damit es sich bis zum unteren Fensterrand erstreckt.
 
Prima! Jetzt habe ich nur noch einen etwas hohen Abstand zwischen dem Footer und dem Rest der Seite. Was mich ja etwas wundert. Na, da muß ich noch mal schauen, woran das liegt. Kannst mich dabei natürlich gerne unterstützen :)
 
Hi.
WIK-Lars hat gesagt.:
Jetzt habe ich nur noch einen etwas hohen Abstand zwischen dem Footer und dem Rest der Seite. Was mich ja etwas wundert.
Zum Vergrößern anklicken....
Was ist denn daran verwunderlich, wenn der mittlere Teil der Seite eine Höhe von 75% besitzt, der obere und untere Seitenbereich aber jeweils eine fixe Höhenangabe, die zusammen keine 25% ergeben, und der Footer nun am unteren Fensterrand positioniert ist?
 
Quiet correct, die height:100% beziehen sich ja auf das gesamte html-Dokument bzw. body. Ich werde mich umgehend an die Arbeit machen!
 
Hi Maik,

was würdest Du mir empfehlen? Vermutlich sollte ich diese Technik mit dem Hintergrundbild nehmen, um meinen Content bis zum Footer zu strecken, nicht wahr?

Komisch finde ich nur, dass die Website bei Browsergrößen von 1024*768 und 1280*800 gleich gut funktioniert. Meine derzeitige vertikale Aufteilung besteht ja aus
  • Header 70px
  • Content und Right 75%
  • Footer 25px
Zugegebenermaßen ein MischMasch, aber ich wollte eben Header und Footer eine fixe Höhe geben, während der übrige Inhalt flexibel sein soll.
 
Ein Hintergrundbild, das sich über die gesamte Fensterhöhe erstreckt, wird dir da nicht wirklich weiterhelfen, denn der Abstand zum Footer wird ja auch durch den Scrollbalken des linken DIVs sichtbar.

Entweder teilst du die Höhen der einzelnen Bereiche konsequent prozentual auf, deren Summe dann 100% ergibt, oder du greifst auf das CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken zurück, um den mittleren Teil vom Header bis zum Footer zu positionieren.
 
Da mein Header u.a. aus einem fixen Bild von einer Höhe in 70px besteht, möchte ich die Aufteilung gerne so lassen.

Danke für Deine Hinweise! Ich werde mich umgehend mit dem von Dir genannten Tutorial befassen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück