Wie richte ich ein div in der unteren rechten Ecke einer Webseite aus, auch wenn der Inhalt weniger ist?

Question

Ich habe diese extrem einfache Splash-Seite hier: http://iph0wnz.com

Es hat die Hauptgrafik in der Mitte, gefolgt von meinem 'a.' Logo unten rechts. Ich möchte, dass das Logo an der unteren rechten Seite der gesamten Seite ausgerichtet wird, was bedeutet, dass, wenn es viel Textinhalt auf der Seite gibt, es nach all dem erscheint (dh es nicht oben schwebt), aber wenn es weniger Inhalt gibt - wie gerade jetzt - dann sollte er am unteren Bildschirmrand ausgerichtet werden und nicht direkt nach dem Inhalt.

Ich werde versuchen, ein Text Beispiel zu geben, wie ich in How to align content of a div to the bottom? sah:

 
    ----------------------------- 
    | less content, no scroll | 
    |       | 
    |       | 
    |       | 
    |      a. | 
    ----------------------------- (screen height) 

und

 
    ----------------------------- 
    | more content, yes scroll | 
    | the quick brown fox jump- | 
    | ped over the lazy dog an- | 
    | d she sells sea shells on | 
    | the sea shore and some o- | 
    | ther random text is put | (screen height) 
    | here so there is a scroll | 
    | bar because the content | 
    | is too much for one scre- | 
    | en to show. okay, I think | 
    | that is enough.   | 
    |      a. | 
    ----------------------------- 

Abgesehen davon, dass andere Frage oben verbunden, ich sah auch How do I force a DIV block to extend to the bottom of a page even if it has no content? aber das didn Ich arbeite auch nicht für mich.

Ich weiß, das ist tot einfach, aber ich bin es leid, alle Tricks und Tricks zu versuchen, die ich finden konnte.

Auch ich würde gerne die Methode verwenden, um das Logo auf der Website zu setzen, wenn der eigentliche Inhalt hineingeht - es wird ein Blog sein.

Hinweis: Es macht mir nichts aus, JavaScript und jQuery zu verwenden, um diesen Effekt zu erzielen.

Answer 1

Versuchen Sie, diese Lösung:

* { margin: 0; } 
html, body { height: 100%; } 
/* the bottom margin is the negative value of the footer's height */ 
.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -142px; } 
/* .push must be the same height as .footer */ 
.footer, .push { height: 142px; } 

here

EDIT gefunden: zu spät zu erinnern, wie es zu tun oder es zu erklären, aber wenn Sie weitere Hilfe Google-Suche benötigen für „sticky Footer“

Answer 2

Versuchen Sie mit Position: absolute zusammen mit Javascripts screen.height.

Denken Sie nicht, es ist die beste Lösung, aber es hat für mich vor einer Weile funktioniert. Wahrscheinlich kann dies mit jQuery noch besser erreicht werden, aber ich habe es nicht versucht.

Answer 3

JavaScript verwenden: Ihre Bildschirmhöhe bekommen, dann dynamisch erstellen Ihren oder was auch immer, dann

position:absolute; 
top:<your document height> 

Sollte Ihren div am Boden setzen. Tun Sie das Gleiche für die richtige Ausrichtung. Allerdings kann ich das Ergebnis nicht für alle Browser garantieren.

Answer 4

etwas etwas anders, aber ebenso nützlich für Sie sein könnte:

position: fixed; 
bottom: 0; 
right: 0; 

Dadurch bleibt Ihr div immer in der unteren rechten Ecke des Bildschirms und der Inhalt wird dahinter fließen (ähnlich wie bei background-attachment: fixed;). Vielleicht nicht genau das, wonach du suchst, aber definitiv einfacher als einige der anderen Hacks da draußen. Beachten Sie, dass dies in IE6 nicht funktioniert.

Answer 5

Ich bin über diesen Thread gestolpert, während ich versucht habe herauszufinden, wie man eine Tabelle rechts unten auf einer Webseite ausrichtet, die ich als Hintergrund für meinen Browser verwende. Ich benutzte die Position: absolut für die Tabelle, verschachtelt in einem Div, aber ausgerichtet von der anderen Richtung.Hier ist, wie die CSS aussieht:

div 
     text-align:center 

    table 
     position:absolute; 
     top:63%; 
     left:80%; 
     text-align:left; 
     background:rgba(0,0,0,0.4); 

Danach war es eine Frage der spielt mit dem Tabellenbreite in HTML um es zu bekommen, wo ich es haben wollte. Ich hoffe, das hilft jedem, der das Gleiche machen möchte - und danke dem OP und denen, die sich die Zeit genommen haben, die Frage des OP zu beantworten und somit meine eigene :-)

Hier ist ein Link zu einem screenshot Ich nahm von der Browser/Desktop. Sie werden feststellen, dass sich die Tabelle unten rechts im Hintergrund des Browsers befindet, aber nicht direkt an den Kanten.