Saltar al contenido

¿Cómo hacer que un div flote hacia abajo?

Hola, tenemos la respuesta a tu interrogante, has scroll y la obtendrás un poco más abajo.

Solución:

Para alinear un div hacia abajo, primero debe hacer que la posición del div principal sea relativa. luego haga que la posición del div requerido sea absoluta y establezca la propiedad inferior en cero.

los división de pie de página tendrá que ser:

  • position:absolute;bottom:0;; Esto lo empujará a la parte inferior de su contenedor, sin embargo, cuando se desplaza hacia abajo más allá del contenedor, el pie de página se desplazará con él.

  • position:fixed;bottom:0;; Esto se usa más a menudo para pegajoso pies de página Esto colocará el pie de página en bottom:0 de tu pantalla. así que no importa dónde te desplaces, lo que ves es lo que obtienes (no se moverá mientras te desplazas)

  • position:relative;bottom:0;; podría usarse, pero será relativo a sus hermanos (es decir, a menos que el división de contenido lo está empujando hacia el fondo, no irá allí), o creo que si el contenedor es relativo, entonces puede funcionar (pero por favor corrígeme si me equivoco).

Basado en tu pregunta: i want the footer div to stick at the bottom of outer wrapper. parece que quieres usar absolute posicionamiento para el pie de página, de modo que siempre se adhiera al fondo de su contenedor….

Si desea que el pie de página permanezca en la parte inferior de la pantalla sin importar a dónde se desplace el usuarioentonces recomendaría fixed posicionamiento.

Definitivamente echa un vistazo a algunos… tutoriales y, lo que es más importante, ¡juega y experimenta!

puede hacernos un jsfiddle y tal vez arroje más luz sobre lo que está tratando de lograr. ¡buena suerte!

Puede dejar que la posición del envoltorio sea relativa y que la posición de los Divs internos sea absoluta.

header
content
footer

Prueba esto http://jsfiddle.net/YAaA3/

valoraciones y reseñas

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *