Código de CSS - Como poner el pie de página al final de página con HTML5 y CSS

Imágen de perfil
Val: 671
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Como poner el pie de página al final de página con HTML5 y CSSgráfica de visualizaciones


CSS

estrellaestrellaestrellaestrellaestrella(9)
Publicado el 26 de Diciembre del 2013 por Xavi
152.908 visualizaciones desde el 26 de Diciembre del 2013
Código que muestra como utilizando una página en HTML5 mostramos siempre el pie de página en al parte baja del navegador.

Versión 1
estrellaestrellaestrellaestrellaestrella(9)

Publicado el 26 de Diciembre del 2013gráfica de visualizaciones de la versión: Versión 1
152.912 visualizaciones desde el 26 de Diciembre del 2013
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver un ejemplo aquí
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="es">
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,body {
            height:100%;
        }
        /* Div que engloba el contenido de la página menos el footer */
        #wrapper {
            min-height:100%;
        }
        header {
            display:block;
            background:#ccc;
            padding:10px 0px;
        }
        section {
            overflow: auto;
            /* Definimos el padding inferior:
               50px del pie de pagina mas 10px de separacion
            */
            padding-bottom: 60px;
            /* Definimos un padding superior */
            padding-top:30px;
        }
        footer {
            position: relative;
            /* Altura total del footer en px con valor negativo */
            margin-top: -50px;
            /* Altura del footer en px. Se han restado los 5px del margen
               superior mas los 5px del margen inferior
            */
            height: 40px;
            padding:5px 0px;
            clear: both;
            background: #286af0;
            text-align: center;
            color: #fff;
        }
 
        /* Esta clase define la anchura del contenido y la posicion centrada 
           El contenido queda centrado y limitado, pero la cabecera y el pie
           llegan hasta los limites del navegador.
        */
        .define {
            width:960px;
            margin:0 auto;
        }
    </style>
</head>
 
<body>
    <div id="wrapper">
        <header>
            <div class='define'>
                <h1>Titulo de la página</h1>
            </div>
        </header>
 
        <section>
            <div class='define'>
                <p>GNU/Linux es uno de los términos empleados para referirse a la combinación del núcleo o kernel libre similar a Unix denominado Linux con el sistema GNU. Su desarrollo es uno de los ejemplos más prominentes de software libre; todo su código fuente puede ser utilizado, modificado y redistribuido libremente por cualquiera bajo los términos de la GPL (Licencia Pública General de GNU, en inglés: General Public License) y otra serie de licencias libres.</p>
                <br><p>Este ejemplo ha sido desarrollado para La Web del Programador </p>
            </div>
        </section>
    </div>
 
    <footer>
        <div class='define'>
            <p>Contenido del pie de página</p>
        </div>
    </footer>
</body>
</html>



Comentarios sobre la versión: Versión 1 (9)

Fernanda
14 de Julio del 2015
estrellaestrellaestrellaestrellaestrella
Me funciona cuando pongo todos los codigos en Dw, pero al momento de probarlo en un explorador, el footer no aparece :(
Responder
Chelby
17 de Julio del 2016
estrellaestrellaestrellaestrellaestrella
Hola, Yo lo hice con el programa Sublime Text 3 y me funcionó.
inténtalo con ese programa.
Responder
anonimo
13 de Abril del 2016
estrellaestrellaestrellaestrellaestrella
el footer me aparece en el menu que hago?
Responder
Alonso
4 de Mayo del 2016
estrellaestrellaestrellaestrellaestrella
lee cuidadosamente las etiquetas y checa desde donde comienza la que tienes de menu y checa donde comienza el footer, de igual manera observa en donde se cierra cada etiqueta.
el footer debe estar afuera de tu menu, de lo contrario aparecera dentro del mismo. Saludos
Responder
Imágen de perfil
29 de Junio del 2018
estrellaestrellaestrellaestrellaestrella
xdxdxd . lo siento pero me hizo gracia leer este comentario...de veras que lo siento, pero es de los comentarios que desafortunadamente suelo leer y encaja a la perfección con aquellos de vosotros que desconoceis por completo el mundo de la PROGRAMACIÓN y de 'que va todo esto...solo copiais y pegais (y encima mal xdxdxd)...el footer te aparece en el top¿?!!...alucinante, no quiero saber el lío de pagina que tendras con los copia.pega. Me recuerda cuando hace mas de 20 años nos llegaban los códigos de la India (sin comentarios!! ni siquiera en Inglés...y mira que programan bien los jodios...pero no sabíamos ni por donde cogerlos!!)..si ninguna duda es lo que te comenta Alonso, es un tema de etiquetas sin cerrar o duplicadas...te recomiendo que te bajes para código algún editor "para dummies" (como los libros famosos!!) que te resalte en mil colores cada lenguaje o metalenguaje claramente y un debugger para chequear los posibles errores, y tambien algun plugin por ejemplo para Chrome o Firefox que te valide el HTML el CSS por lo menos.. un saludo y no te lo tomes a mal amigo. PERO INTENDAD APRENDER SOLOS CON HORAS Y HORAS DE EQUIVOCACIONES POR DIOS!!
Responder
Hola
2 de Agosto del 2016
estrellaestrellaestrellaestrellaestrella
Gracias amigo me funcionó. Te lo agradezco XD
:)
Responder
Naivy
19 de Junio del 2018
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
29 de Junio del 2018
estrellaestrellaestrellaestrellaestrella
Buenas tardes:
Como siempre aquí. los códigos excelentes en todos los sentidos. Me encanta sobre todo TU LIMPIEZA Y LA INDENTACIÓN (que se está perdiendo!!).
Un cordial saludo (www.silicaclub.net)
Responder
alejandro
8 de Diciembre del 2018
estrellaestrellaestrellaestrellaestrella
muchas gracias
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2569