footer siempre abajo

#1 (**permalink**) 07/10/2015, 09:51

Estimados, me podrían ayudar con este tema, el tema de dejar el footer (pie de página siempre abajo.

a mi se me ocurre que el body tenga el 100% del alto de la página, pero de ahí no se que se puede hacer.

Espero puedan ayudarme, gracias

lauser · #2 (**permalink**) 07/10/2015, 14:31

Has probado a fijarlo???
Algo así como:

Código CSS:

Ver original#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

#3 (**permalink**) 09/10/2015, 14:50

el problema del fixed es que siempre se mostrará en pantalla cuando se mueve la página, hay otra forma

suudobal · #4 (**permalink**) 15/10/2015, 04:38

Normalmente uso esto:

Código HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Ejemplo footer</title>
        <meta charset="UTF-8">
        
        <style>
            * {
                box-sizing: border-box;
            }

            html,body {height:100%;padding:0;margin:0}

            .contenedor {background-color:#CCC;min-height: 100%;padding-bottom:50px}

            #footer {
                background-color:#F00;
              position:relative;
              height:50px;
              margin-top:-50px;
            }            
        </style>
        
    </head>
    <body>
        <div class="contenedor">Contenido</div>
        <div id="footer">Pie de página</div>
    </body>
</html>

Obligamos a que el cuerpo del documento sea el 100% de la página y creamos una capa que también tenga como mínimo la altura de la página. Luego añadimos el footer con la altura necesaria y lo subimos con margin-top para que parezca que siempre está abajo sin que salga la barra de deslizamiento vertical si el contenido es muy poco. Prueba a ver y nos cuentas

Un saludo