Positionierung css-hintergrund am unteren Rand des Fensters, ohne zusätzlichen markup-oder min-height

Ist es möglich, die position eines Hintergrundbildes am unteren Rand des Fensters, ohne zusätzlichen Elemente oder min-height?

Ich versuche, ein Bild am unteren Rand des Fensters, nicht der Körper, egal wie kurz die Seite ist.

Was ich meine ist, dass wenn eine Seite länger ist als die vertikale Bildschirmauflösung, die browser können Sie ganz nach unten scrollen und das Bild wäre im unteren Bereich (footer hintergrund).

Wenn die Seite ist sehr kurz, vielleicht die Hälfte der Höhe des Bildschirms, der footer-hintergrund "hängen" in der Luft. Ich versuche, es zu haben, also bleibt Sie am unteren Rand des Fensters.

Habe ich versucht, min-height, aber erfordert, dass Sie einen großen genug Höhe zur Deckung der größte Auflösung, dass Menschen, die Ihre Website besuchen könnten, haben wiederum die große leere Flächen, die noch da sind, wenn Sie die Größe ändern Sie Ihre browser - (oder wenn man kleinere Bildschirme).

Ich habe versucht, den footer-hintergrund auf das body-element, aber es hängt. Einstellung der footer-hintergrund auf das html-element gab mir nur eine weiße Fläche an der Unterseite, so habe ich es für meine header-hintergrund statt.

Das grundlegende layout meiner website:

<html>
<body>
<div id="header">other elements and header stuff</div>
<div id="main">main content</div>
<div id="footer">other elements and footer stuff</div>
</body>
</html>

InformationsquelleAutor gavsiu | 2011-06-05

  1. 11

    Ich würde es ja gerne machen...

    html {
   min-height: 100%;   
}

body {
   background: url(path/to/image.png) no-repeat center bottom;   
}

    jsFiddle.

    eigentlich ist das perfekt. ich versuchte es einmal und es hat nicht funktioniert aus irgendeinem Grund, so sah ich in css sticky footer, aber das bedeutete, dass ich hatte, einzuwickeln meinen header und main mit einem wrapper und benötigt eine Feste Höhe Fußzeile. ich ging zurück und versucht, diese wieder und es hat tatsächlich funktioniert, auch mit der cross-browser min-height lösen.

    InformationsquelleAutor alex

  2. -2

    Du meinst ein sticky footer.

    Nein, ich denke er meint eine background-image positioniert am unteren Rand des Ansicht-port.
    In seinem HTML schreibt er other elements and footer stuff, so denke ich, dass er nicht nur ein Bild in der Fußzeile.
    Die Frage, die Titel selbst zu unterstützen scheint, ist meine interpretation, aber. Ich könnte natürlich auch ganz falsch.

    InformationsquelleAutor Midas

Schreibe einen Kommentar