Blog


8
septiembre
- 2012 -
David Nieves Coronado

Hola a todos, hoy traigo la solución a un problema que cualquier desarrollador web se lo habrá encontrado alguna vez. ¿Como pongo siempre mi footer en la posición bottom de mi página y cómo lo hago compatible para todos los navegadores?, la solución es simple, siempre y cuando tengamos una distribución adecuada de los elementos generales que componen nuestra web y un código css que comentaré más adelante.

  • Distribución de la web. Nuestra web estará formada por los siguiente elementos generales.

<html>
<head></head>
<body>
<div id=”wrapper”>
<div id=”header”></div>
<div id=”content”>
<!– Aquí irá el contenido de la página –>
<div id=”push”></div>
</div>
<div id=”footer”></div>
</body>
</body>
</html>

 

  • El código css. Aplicando las siguientes propiedades a los elementos de nuestra web obtendremos lo que buscábamos que el footer siempre se encuentra abajo de nuestra web reduzcamos o aumentemos Zoom.
* {     
    margin: 0; 
} 
html, body{     
    height: 100%; 
} 

#wrapper{    
    min-height: 100%;     
    height: auto !important;     
    height: 100%;     
    margin: 0 auto -150px; /* el magin-bottom es el valor negativo de     
    la altura del footer */ 
} 

#footer, #push {     
    height: 150px; /* la altura del push es la misma que la altura     
    del footer */ 
}

Cómo mantener nuestro Footer siempre abajo (css) fue posteado el septiembre 8, 2012 a las 11:14 en CSS y. fue modificado el noviembre 27, 2013 at 18:30. Puedes seguir cualquier respuesta a esta entrada a través de la RSS 2.0 feed. Puedes dejar una respuesta o hacer un trackback desde tu web.

Compartir: Twitter, Facebook, Delicious, Digg, Reddit

|

2 Comments

Soundcloud-downloader on 06/15/2013 at 6:23.

Wow, amazing blog layout! How long have you been blogging for?
you made blogging look easy. The overall look of your site
is wonderful, let alone the content!

Responder

Jorge Luis on 10/09/2013 at 23:57.

no funciona en crhome ni mozila

Responder

Deja tu comentario

Tranquilo, tu email no será publicado o compartido.
Rellena los campos obligatorios marcados con *


*

Puedes utilizar etiquetas HTML con sus correspondientes atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>