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

Imágen de perfil

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


CSS

estrellaestrellaestrellaestrellaestrella(5)
Publicado el 26 de Diciembre del 2013 por Xavi
77.094 visualizaciones desde el 26 de Diciembre del 2013. Una media de 504 por semana
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(5)

Publicado el 26 de Diciembre del 2013gráfica de visualizaciones de la versión: Versión 1
77.095 visualizaciones desde el 26 de Diciembre del 2013. Una media de 504 por semana
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 (5)

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
04 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
Hola
02 de Agosto del 2016
estrellaestrellaestrellaestrellaestrella
Gracias amigo me funcionó. Te lo agradezco XD
:)
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2569