You are here
Footer absoluto con HTML5 y CSS3 Sin categoría 

Footer absoluto con HTML5 y CSS3

Footer absoluto con HTML5 y CSS3

Casi cada sitio tiene una cabecera, sección media, y el pie. Los usuarios han llegado a esperar y disfrutar de la consistencia.

Sin embargo, a veces el pie de página es un poco complicado si una página web en particular no tiene mucho contenido.

Por lo general, queremos un pie de página a “pegarse” a la parte inferior de una página y no el fondo de un navegador, también conocida como “sticky footer”.

Vamos a ver un ejemplo de lo molesto que puede ser un pie de página si tiene muy poco contenido en una página web.

Colocando el pie de página en la parte inferior absoluta de una página web ha sido un problema desde hace muchos años, pero voy a mostrar un completo HTML y CSS única solución.

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
<style>
html, body {
    margin:0px;
    padding:0px;   
    background-color:#E9E9E9;
}
div.header {
    width:100%;
    background-color:#555;
    color:#FFF;
    padding:5px 0px;
    text-align:center;
}
div.main-content {
    background-color:#FFF;
    border:thin solid #666;
    width:600px;
    margin:10px auto;
    padding:5px;
}
div.footer {
    width:100%;
    background-color:#555;
    color:#FFF;
    padding:5px 0px;
    text-align:center;
}
</style>
<div class="header">
    <h1>After Hours Programming</h1>
</div>
<div class="main-content">
    <p>Sed porttitor lectus nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh.</p>
    <p>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Cras ultricies ligula sed magna dictum porta. Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p>
</div>
<div class="footer">
    <p>© 2013 After Hours Programming</p>
</div>

Algo simplemente no se ve bien acerca de esta página web.

El pie de página muestra torpemente en el centro de la página, que nunca es donde queremos un pie de página. Claro, podríamos atamos el pie de página de la parte inferior de la ventana, pero un pie de página que se mueve con la página es casi tan molesto.

Así que, ¿cómo podemos empujar a pie de página en la parte inferior de una página para las dos páginas con mucho contenido y los que tienen poco contenido? Es fácil con un simple truco que todos los navegadores desde IE 6 puedan entendernos, necesitan para envolver todo nuestro contenido en un div que contiene, al menos, que se extiende por la ventana del usuario, lo que nos da la parte inferior absoluta de toda la página web.

Ahora que sabemos que la parte inferior de la página, que acabamos de modificar nuestro div pie de página para sentarse en la parte superior del contenedor div por la altura del pie de página.

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
<style>
html, body {
    margin:0px;
    padding:0px;   
    background-color:#E9E9E9;
}
div.header {
    width:100%;
    background-color:#555;
    color:#FFF;
    padding:5px 0px;
    text-align:center;
}
div.footer {
    height:50px; /*different*/
    width:100%;
    background-color:#555;
    color:#FFF;
    padding:5px 0px;
    text-align:center;
}
/*different*/
div.container {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px; /* the bottom margin is the negative value of the footer's height */
}
/*different*/
div.footer-push {
    height: 60px
}
</style>
<div class="container"><!--different-->
    <div class="header">
        <h1>After Hours Programming</h1>
    </div>
    <div class="main-content">
        <p>Sed porttitor lectus nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh.</p>
        <p>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Cras ultricies ligula sed magna dictum porta. Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p>
    </div>
    <div class="footer-push"></div><!--different-->
</div><!--different-->
<div class="footer">
    <p>© 2013 After Hours Programming</p>
</div>

Si en realidad copió ambos ejemplos en el navegador, se puede observar que el segundo ejemplo se ve mucho mejor.

Podríamos haber utilizado JavaScript para empujar el pie hacia la parte inferior de la página, pero ¿por qué el uso de JavaScript cuando CSS va a hacer? La última nota importante es que algunos pies de página son más grandes que otros, lo que significa que es posible que tenga que modificar la altura del pie de página con el fin de tener un pie de página que te gusta.


Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts