¿Cómo alinear un div en la esquina inferior derecha de una página web, incluso si el contenido es menor?

Question

Tengo esta página de bienvenida extremadamente simple aquí: http://iph0wnz.com

Tiene el gráfico principal en el medio, seguido de mi 'a.' logotipo en la parte inferior derecha. Quiero que el logotipo se alinee en la esquina inferior derecha de toda la página , lo que significa que, si hay mucho contenido de texto en la página, aparece después de todo eso (es decir, no se ubica en la parte superior), pero si hay menos contenido, como en este momento, debe alinearse en la parte inferior de la pantalla y no justo después del contenido.

Voy a tratar de dar un ejemplo textual como la que vi en How to align content of a div to the bottom?:

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

y

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

Aparte de eso otra pregunta vinculado anteriormente, también me miraron How do I force a DIV block to extend to the bottom of a page even if it has no content? pero que didn Tampoco funciona para mí.

Sé que esto es muy simple, pero estoy cansado de probar todos los trucos y trucos que pude encontrar.

Además, me gustaría utilizar el método para colocar el logotipo en el sitio cuando se incluye el contenido real: será un blog.

Nota: No me importa usar JavaScript y jQuery si es necesario para lograr este efecto.

Answer 1

Pruebe esta solución:

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

encontró here

EDIT: demasiado tarde para recordar cómo hacerlo o explicarlo, pero si necesita más ayuda búsqueda en Google de "pie pegajoso"

Answer 2

Intenta usar position: absolute junto con javascripts screen.height.

No creo que sea la mejor solución pero funcionó para mí hace un tiempo. Probablemente esto se puede lograr incluso mejor con jQuery, pero no lo intenté.

Answer 3

Uso de JavaScript: obtener su altura de la pantalla, a continuación, crear dinámicamente su o lo que sea, entonces

position:absolute; 
top:<your document height> 

debe poner su div en la parte inferior. Haz lo mismo para la alineación correcta. Sin embargo, no puedo garantizar el resultado en todos los navegadores.

Answer 4

Algo un poco diferente pero igualmente útil para usted podría ser:

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

Esto mantendrá su div en la esquina inferior derecha de la pantalla en todo momento y el contenido fluirá detrás de él (algo similar a background-attachment: fixed;). Tal vez no sea exactamente lo que estás buscando, pero definitivamente es más fácil que algunos de los otros hacks que existen. Tenga en cuenta que esto no funcionará en IE6.

Answer 5

Me encontré con este hilo mientras trataba de encontrar la forma de alinear una tabla en la parte inferior derecha de una página web que estoy usando como fondo para mi navegador. Utilicé la posición: absoluta para la tabla, anidada en un div, pero alineada desde la otra dirección.Así es como el CSS se ve:

div 
     text-align:center 

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

Posteriormente, se trataba de una cuestión de jugar con el ancho de la tabla en HTML para llegar a donde yo quería que fuera. Espero que esto ayude a cualquiera que busque hacer lo mismo, y gracias a OP y aquellos que se tomaron el tiempo para responder la pregunta del OP y por lo tanto la mía :-)

Aquí hay un enlace a un screenshot que tomé de el navegador/escritorio. Notarás que la tabla se encuentra en la esquina inferior derecha del fondo del navegador, pero no directamente en los bordes.