Wie positioniere ich ein Element 40 Pixel unter dem niedrigsten DIV auf einer Seite, wenn eine Bildlaufleiste vorhanden ist?

Question

Ich brandmarke mehrere Websites, die ich kürzlich erstellt habe, mit einem Bild, das auf Schweben reagiert und Links zu meiner eigenen Website zurückgibt. Ich füge das Markup und CSS dynamisch mit einer jQuery Append-Funktion ein, die mein Logo absolut in der unteren rechten Ecke der Website des Kunden positioniert, und es funktioniert größtenteils großartig. Allerdings muss ich diese Positionierung verbessern, um zwei verschiedene Szenarien zu berücksichtigen, und ich bin ziemlich ratlos.

Wenn die Elemente auf der Website nicht den unteren Rand des Fensters erreichen, möchte ich das Logo in der unteren rechten Ecke, was derzeit passiert. Das ist toll.

Wenn die Elemente, die unten auf der Seite oder darüber hinaus zu tun erreichen, eine Scrollbar zwingen, mag ich das Logo 40px unter dem Boden des untersten positioniert DIV erreicht, noch in der rechten unteren Ecke der Seite (fast, als ob es waren Teil des normalen Dokumentenflusses und nicht absolut positioniert). Das ist, was ich nicht herausfinden kann.

Answer 1

Der einfachste Weg, dieses Problem zu lösen, ist ein relativ positionierte Behälter Block gerade in Ihrem Körper Tag zu erstellen. Dann wird Ihr Logo absolut in Relation zu diesem Container und nicht zum Viewport positioniert. Sie müssen dann ein wenig arbeiten, um sicherzustellen, dass es am unteren Rand der Seite angezeigt wird, wenn es nicht genügend Inhalte gibt, um es nach unten zu schieben.

Was Sie tun wollen, sind in etwa analog zu einem css sticky Footer: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Answer 2

Eine Sache, die Sie tun können, ist, Ihr Ansichtsfenster auf 100% Höhe zu bringen, wenn es keine Bildlaufleiste gibt. Wenn eine Bildlaufleiste vorhanden ist, ist die Höhe länger als das Ansichtsfenster.

Der Vorteil ist, dass Sie ein Container-Div haben können, das den gesamten Inhalt auf der Seite enthält. Geben Sie diesem Div eine relative Position und positionieren Sie Ihr Logo absolut innerhalb des Container-Div.

Hier ist der CSS-Code:

html, body { 

    height: 100%; 

} 

#container { 

    position: relative; 

    min-height: 100%; 

    height: 100%; 

    voice-family: "\"}\""; 

    voice-family: inherit; 

    height: auto; 

} 

html>body #container { 

    height: auto; 

}