¿Cómo puedo posicionar un elemento de 40 píxeles por debajo de la DIV alcanzando más bajo en una página cuando una barra de desplazamiento está presente?

Question

Estoy Branding varios sitios recientemente he creado con una imagen que reacciona a cierne y enlaces de vuelta a mi propio sitio. Estoy inserción dinámica del margen de beneficio y CSS con una función de jQuery añadir que posiciona absolutamente mi logotipo en la esquina inferior derecha del sitio del cliente, y está funcionando muy bien en su mayor parte. Sin embargo, necesito para mejorar ese posicionamiento para acomodar dos escenarios diferentes, y estoy bastante perplejo.

Si los elementos en el sitio no llegan a la parte inferior de la ventana, quiero que el logotipo de la esquina inferior derecha, que es lo que sucede actualmente. Esto es muy bueno.

Si los elementos de hacer llegar a la parte inferior de la página, o más allá, forzando una barra de desplazamiento, quiero el logotipo posicionado 40px debajo de la parte inferior de los más bajos llegando DIV, todavía en la esquina inferior derecha de la página (casi como si se tratara parte del flujo de documentos normal, en lugar de posición absoluta). Esto es lo que no puedo entender.

Answer 1

La forma más sencilla de resolver este problema es crear un bloque de contenedores posicionado relativamente justo en el interior de su cuerpo de la etiqueta. Entonces, su logotipo será una posición absoluta en relación con ese contenedor en lugar de la ventana gráfica. A continuación, hay que hacer un poco de trabajo para asegurarse de que aparece en la parte inferior de la página cuando no hay suficiente contenido para empujarlo ahí abajo.

Lo que están queriendo hacer es más o menos análoga a un pie de página pegajoso css: http://ryanfait.com/resources/footer-stick-to -fondo de página /

Answer 2

Una cosa que podría hacer, es hacer que su altura visor 100% cuando no hay barra de desplazamiento. Cuando hay una barra de desplazamiento, la altura será más largo que el área de visualización.

La ventaja es que usted podría tener un div contenedor, que contiene todo el contenido de la página. Dar ese DIV una posición relativa y la posición de su logotipo absoluta dentro del contenedor div.

Aquí está el código CSS:

html, body {

    height: 100%;

}

#container {

    position: relative;

    min-height: 100%;

    height: 100%;

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

    voice-family: inherit;

    height: auto;

}

html>body #container {

    height: auto;

}