Div flotante inferior o abajo.

Div flotante abajo

Div flotante abajo

Desde Win 95, hemos conocido  la barra de tareas como algo situado en la parta inferior de la pantalla de Sistema Operativo. Tal vez esto cambie con Win 8.

Hoy vamos a ver cómo ubicar un div justo en la parte inferior, cual barra de tareas de Windows por medio de css. Lo primero que vamos a hacer es crear un div llamado “inferior”:


<div id="inferior">¡Hola mundo!</div>

Lo siguiente es crear el código CSS, para lo cual creamos las propiedades para situar nuestro div en la parte inferior:


<style type="text/css">
body,html{
height:100%; /*Siempre es necesario cuando trabajamos con alturas*/
}
 #inferior{
color: #FFF;
background: #000;
position:absolute; /*El div será ubicado con relación a la pantalla*/
left:0px; /*A la derecha deje un espacio de 0px*/
right:0px; /*A la izquierda deje un espacio de 0px*/
bottom:0px; /*Abajo deje un espacio de 0px*/
height:50px; /*alto del div*/
z-index:0;
 }
</style>

Y listo, espero que te sirva. Aquí les dejo el ejemplo subido a mi Dropbox:

https://dl-web.dropbox.com/get/Public/donestandares_pruebas/div_flotante_inferior.html?w=6dfbabf6

Hasta pronto.

Anuncios
Acerca de

Programador, usuario Linux e hincha de Millonarios de Colombia

Tagged with: , , , , , , , ,
Publicado en css, Css para principiantes, html, manuales, Trucos css
8 comments on “Div flotante inferior o abajo.
  1. Gracias! Me re sirvió! 😉

  2. Juan dice:

    Genio!!! muchas gracias por el aporte

  3. cars dice:

    Car shopping is stressful. Now that there are hundreds
    of makes and models to choose from, not to mention promotions
    and payment options, it’s easy to become frustrated and stressed out. The information here will help make buying a car as easy and stress-free as possible.

  4. Jairog dice:

    Hola amigo fijate que tengo un problema, tengo una div contenedor y 3 divs flotante adentro pero cuando hago -zoom en el navegador la ultima div se coloca abajo, sabes como puedo solucionar ese problema

  5. Eduardorq dice:

    Para mantener el div fijo en la parte inferior y que no suba si hacemos scroll en el caso de que la página se expanda hacia abajo la solución es cambiar la propiedad position de absolute a fixed.

  6. Rigo Hernández dice:

    Excelente lo he probado y me ha funcionado muy bien, muchas gracias por el aporte.

  7. me sirvió pero como puedo hacer para que el div tenga una opción de minimizar y maximizar?

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Sígueme en Twitter
Categorías
Flickr Photos
A %d blogueros les gusta esto: