Come allineare un div nell'angolo in basso a destra di una pagina Web anche se il contenuto è inferiore?

Question

Ho questa pagina splash estremamente semplice qui: http://iph0wnz.com

Ha il grafico principale nel mezzo, seguito dal mio 'a'. logo in basso a destra. Voglio che il logo sia allineato alla mano in basso a destra dell'intera pagina, il che significa che se nella pagina c'è molto contenuto di testo, dopo tutto appare (cioè non si posiziona sopra), ma se c'è meno contenuto - come adesso - allora dovrebbe essere allineato alla parte inferiore dello schermo, e non subito dopo il contenuto.

Cercherò di dare un esempio di testo, come ho visto in How to align content of a div to the bottom?:

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

e

 
    ----------------------------- 
    | 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. | 
    ----------------------------- 

A parte che altra questione legata sopra, ho anche guardato How do I force a DIV block to extend to the bottom of a page even if it has no content? ma che didn Anche io lavoro per me.

So che questo è semplice, ma sono solo stanco di provare tutti gli hack e i trucchi che ho trovato.

Inoltre, mi piacerebbe utilizzare il metodo per inserire il logo sul sito quando entra il contenuto effettivo: sarà un blog.

Nota: non mi dispiace usare JavaScript e jQuery se necessario per ottenere questo effetto.

Answer 1

Prova questa soluzione:

* { 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; } 

trovato here

EDIT: troppo tardi per ricordare come si fa o spiegarlo, ma se avete bisogno di più aiuto ricerca su Google per "piè di pagina appiccicoso"

Answer 2

Provare a utilizzare la posizione: assoluta insieme allo schermo javascripts.height.

Non penso che sia la soluzione migliore ma ha funzionato per me qualche tempo fa. Probabilmente questo può essere ottenuto ancora meglio con jQuery, ma non l'ho provato.

Answer 3

Utilizzando Javascript: ottenere la vostra altezza dello schermo, quindi creare in modo dinamico la vostra o qualsiasi altra cosa, allora

position:absolute; 
top:<your document height> 

dovrebbe mettere il vostro div in fondo. Fai lo stesso per il giusto allineamento. Tuttavia, non posso garantire il risultato su tutti i browser.

Answer 4

qualcosa di leggermente diverso, ma ugualmente utile per voi potrebbe essere:

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

Ciò manterrà il tuo div nell'angolo in basso a destra dello schermo in ogni momento e il contenuto scorrerà dietro di esso (in qualche modo simile ad un allegato in background: fisso;). Forse non esattamente quello che stai cercando, ma sicuramente più facile di altri degli hack in circolazione. Si noti che questo non funzionerà in IE6.

Answer 5

Mi sono imbattuto in questo thread mentre cercavo di capire come allineare un tavolo in basso a destra di una pagina web che sto usando come sfondo per il mio browser. Ho usato la posizione: assoluta per il tavolo, annidata in un div, ma allineata dall'altra direzione.Ecco come il CSS appare:

div 
     text-align:center 

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

In seguito, si trattava di una questione di giocare con la larghezza della tabella in HTML per ottenerlo in cui ho voluto che fosse. Spero che questo aiuti chiunque cerchi di fare la stessa cosa - e grazie a OP e coloro che hanno avuto il tempo di rispondere alla domanda dell'OP e quindi il mio :-)

Ecco un link a un screenshot che ho preso di il browser/desktop. Noterai che la tabella si trova in basso a destra sullo sfondo del browser, ma non direttamente sui bordi.