Cosas Basicas: Pie de pagina que se queda en el fondo

axterixv · #1 (**permalink**) 22/02/2007, 10:22

El año pasado trabajamos con los amigos de Ovillo, una solución para que con CSS pudieramos tener un pie de página que se quedara al fondo de la página, lamentablemente parece ser que IE7 no la quiere y FF2, tampoco lo interpreta también cómo la 1.5.

Quisiera dejarla por aca para ver si pudieramos lograr una implementación nueva que funcione en los nuevos navegadores:

Pie de Pagina que se queda en el fondo, solución parcial:

(problema, si el contenido es mayor que la pantalla inicial el footer se queda en medio)

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h t  t p : // www .w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="h t t p : // www .w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Footer</title>
<style type="text/css">
* {
	margin:0px;
	padding:0px;
}
html{height: 100%;}
body{
	height: 100%;
	background-color:#fc0;
}
#contenedor {
	position:relative;
	height:100%;
	margin: auto;
}
* html #contenedor {height: 100%;}
#pie {
	position:relative;
	margin-top:-3em;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;
	background-color:#600;
	height: 3em;
	color:white;
	vertical-align:middle;
}
#piecito {position: absolute; bottom:0px; top:1em; width:100%; text-align:center;}
* html #pie {margin-top: -3em;}
</style>
</head>
<body>
<!-- Inicio - Contenedor del sitio Web -->
<div id="contenedor">
<!-- Inicio - Contenido del sitio Web -->
<div id="contenido">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus diam mauris, blandit a, vestibulum non, condimentum in, dolor. Quisque non libero. Nulla pellentesque lobortis odio. Donec sapien pede, tristique eget, auctor sed, vestibulum sed, felis. Ut nisi tellus, scelerisque ac, lobortis sit amet, eleifend fermentum, odio. Ut ornare nunc sit amet massa. <p>Nunc vitae dolor. Aliquam a nunc sed erat convallis tempus. Ut non dui sed nisi vehicula condimentum. Donec venenatis convallis tortor.</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae nisi. Sed rutrum neque ut mi. Phasellus vulputate sagittis est. Phasellus viverra ullamcorper erat. Nam vehicula, nisi in commodo tempus, justo augue ullamcorper tortor, nec cursus nisi lectus vel est. Ut luctus, arcu non luctus convallis, tortor neque dapibus lorem, sit amet tempus nisl est vitaenisl. Aenean enim est, facilisis nec, commodo in, suscipit eu, purus. Nullam at turpis. Suspendisse potenti. Donec pretium. Donec a diam at augue tempus congue. Praesent aliquam convallis dui. Sed magna. Vestibulum gravida scelerisque arcu. Fusce eu mi. Aliquam tortor sem, fringilla id, viverra ullamcorper, eleifend sit amet, ante. Mauris gravida. Praesent in magna nec sem ullamcorper porttitor. Fusce mi nibh, lacinia non, auctor nec, hendrerit eget, nibh. Nulla lobortis tempus eros.</p>
<p>Suspendisse potenti. Nulla laoreet, lorem id sodales elementum, lacus erat tincidunt lacus, non consectetuer est leo eget erat. Sed malesuada dui quis quam. Proin nisl felis, ultrices vel, iaculis eu, condimentum eu, dolor. Suspendisse ultrices. Curabitur consectetuer odio quis nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elit. Nullam porta augue. Sed lorem nibh, pulvinar ut, congue sit amet, eleifend id, metus. Praesent iaculis mi tempus nunc. Fusce euismod, dolor vehicula pellentesque feugiat, arcu dolor dignissim enim, non sagittis tellus enim id justo. Quisque sollicitudin blandit ligula.</p>
<p>Phasellus non augue. Suspendisse volutpat, ipsum et pharetra porta, felis metus convallis nisi, sagittis vulputate leo augue id diam. Proin fermentum condimentum eros. Aliquam elementum ante quis ante. Phasellus imperdiet, dolor vitae vulputate molestie, leo enim pretium tortor, non varius dolor quam ac justo. Vestibulum leo. Proin tempus sagittis mauris. Utquis nibh. Pellentesque aliquam, mi vitae viverra euismod, sem eros sodales lorem, pulvinar pharetra leo velit id velit. Pellentesque feugiat.</p>
<p>Vestibulum accumsan sapien. Nunc vitae turpis eget odio vehicula molestie. Mauris nulla lorem, convallis quis, convallis vitae, sollicitudin nec, diam. Etiam urna ligula, pharetra tincidunt, gravida eu, consectetuer at, diam. Morbi vulputate luctus nunc. Integer arcu velit, fringilla a, pulvinar vel, adipiscing ac, sem. Duis quis neque molestie lectus molestie accumsan. Vivamus dui. Etiam aliquet pulvinar urna. Morbi mattis eleifend purus. Nunc porta. In hac habitasse platea dictumst. Mauris quis massa quis est fringilla euismod. Integer dignissim neque vitae felis. Pellentesque eget nisi. Pellentesque mattis elit nec ipsum.</p>
<p>Aliquam sit amet urna vehicula felis ultrices semper. Praesent laoreet sem non justo. Curabitur adipiscing velit in sapien bibendum fermentum. Proin non elit in diam nonummy molestie. Praesent dictum. Aliquam sollicitudin egestas velit. Proin adipiscing ante quis urna. Praesent vel est eu turpis pharetra malesuada. Phasellus aliquam, neque vel vehicula pellentesque, dolor orci luctus orci, sollicitudin malesuada enim elit at nisl. Maecenas pharetra. Nulla id arcu.</p>
<p>Phasellus non augue. Suspendisse volutpat, ipsum et pharetra porta, felis metus convallis nisi, sagittis vulputate leo augue id diam. Proin fermentum condimentum eros. Aliquam elementum ante quis ante. Phasellus imperdiet, dolor vitae vulputate molestie, leo enim pretium tortor, non varius dolor quam ac justo. Vestibulum leo. Proin tempus sagittis mauris. Utquis nibh. Pellentesque aliquam, mi vitae viverra euismod, sem eros sodales lorem, pulvinar pharetra leo velit id velit. Pellentesque feugiat.</p>
<p>Vestibulum accumsan sapien. Nunc vitae turpis eget odio vehicula molestie. Mauris nulla lorem, convallis quis, convallis vitae, sollicitudin nec, diam. Etiam urna ligula, pharetra tincidunt, gravida eu, consectetuer at, diam. Morbi vulputate luctus nunc. Integer arcu velit, fringilla a, pulvinar vel, adipiscing ac, sem. Duis quis neque molestie lectus molestie accumsan. Vivamus dui. Etiam aliquet pulvinar urna. Morbi mattis eleifend purus. Nunc porta. In hac habitasse platea dictumst. Mauris quis massa quis est fringilla euismod. Integer dignissim neque vitae felis. Pellentesque eget nisi. Pellentesque mattis elit nec ipsum.</p>
<p>Aliquam sit amet urna vehicula felis ultrices semper. Praesent laoreet sem non justo. Curabitur adipiscing velit in sapien bibendum fermentum. Proin non elit in diam nonummy molestie. Praesent dictum. Aliquam sollicitudin egestas velit. Proin adipiscing ante quis urna. Praesent vel est eu turpis pharetra malesuada. Phasellus aliquam, neque vel vehicula pellentesque, dolor orci luctus orci, sollicitudin malesuada enim elit at nisl. Maecenas pharetra. Nulla id arcu.</p>
<p>Phasellus non augue. Suspendisse volutpat, ipsum et pharetra porta, felis metus convallis nisi, sagittis vulputate leo augue id diam. Proin fermentum condimentum eros. Aliquam elementum ante quis ante. Phasellus imperdiet, dolor vitae vulputate molestie, leo enim pretium tortor, non varius dolor quam ac justo. Vestibulum leo. Proin tempus sagittis mauris. Utquis nibh. Pellentesque aliquam, mi vitae viverra euismod, sem eros sodales lorem, pulvinar pharetra leo velit id velit. Pellentesque feugiat.</p>

<p>Vestibulum accumsan sapien. Nunc vitae turpis eget odio vehicula molestie. Mauris nulla lorem, convallis quis, convallis vitae, sollicitudin nec, diam. Etiam urna ligula, pharetra tincidunt, gravida eu, consectetuer at, diam. Morbi vulputate luctus nunc. Integer arcu velit, fringilla a, pulvinar vel, adipiscing ac, sem. Duis quis neque molestie lectus molestie accumsan. Vivamus dui. Etiam aliquet pulvinar urna. Morbi mattis eleifend purus. Nunc porta. In hac habitasse platea dictumst. Mauris quis massa quis est fringilla euismod. Integer dignissim neque vitae felis. Pellentesque eget nisi. Pellentesque mattis elit nec ipsum.</p>
<p>Aliquam sit amet urna vehicula felis ultrices semper. Praesent laoreet sem non justo. Curabitur adipiscing velit in sapien bibendum fermentum. Proin non elit in diam nonummy molestie. Praesent dictum. Aliquam sollicitudin egestas velit. Proin adipiscing ante quis urna. Praesent vel est eu turpis pharetra malesuada. Phasellus aliquam, neque vel vehicula pellentesque, dolor orci luctus orci, sollicitudin malesuada enim elit at nisl. Maecenas pharetra. Nulla id arcu.</p>
</div>
<!-- Fin - Contenido del sitio Web -->
</div>
<!-- Inicio - Contenedor del sitio Web -->
<div id="pie">
<div id="piecito">
<p>Todos los derechos reservados</p>
</div>
</div>
<!-- Fin - Contenedor del sitio Web -->
</body>
</html>

Mikmoro · #2 (**permalink**) 22/02/2007, 16:16

Hola, Axterixv.
Puedes probar este código en FF2 y en IE7 a ver si funciona bien:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <title>Footer</title>
  <style type="text/css">
* { margin: 0px;
padding: 0px;
}
html, body { height: 100%;
}
#contenedor {background-color: rgb(255, 204, 0);
min-height: 92%;
height: auto !important;
height: 92%;
}
#pie { background-color: rgb(102, 0, 0);
height: 3em;
color: white;
text-align: center;
}
#pie p { line-height: 3em;
}
  </style>
</head>
<body>
<div id="contenedor">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Phasellus diam mauris, blandit a, vestibulum non, condimentum in,
dolor. Quisque non libero. Nulla pellentesque lobortis odio. Donec
sapien pede, tristique eget, auctor sed, vestibulum sed, felis. Ut nisi
tellus, scelerisque ac, lobortis sit amet, eleifend fermentum, odio. Ut
ornare nunc sit amet massa. </p>
<p>Nunc vitae dolor. Aliquam a nunc sed erat convallis tempus. Ut
non dui sed nisi vehicula condimentum. Donec venenatis convallis tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Proin vitae
nisi. Sed rutrum neque ut mi. Phasellus vulputate sagittis est.
Phasellus viverra ullamcorper erat. Nam vehicula, nisi in commodo
tempus, justo augue ullamcorper tortor, nec cursus nisi lectus vel est.
Ut luctus, arcu non luctus convallis, tortor neque dapibus lorem, sit
amet tempus nisl est vitaenisl. Aenean enim est, facilisis nec, commodo
in, suscipit eu, purus. Nullam at turpis. Suspendisse potenti. Donec
pretium. Donec a diam at augue tempus congue. Praesent aliquam
convallis dui. Sed magna. Vestibulum gravida scelerisque arcu. Fusce eu
mi. Aliquam tortor sem, fringilla id, viverra ullamcorper, eleifend sit
amet, ante. Mauris gravida. Praesent in magna nec sem ullamcorper
porttitor. Fusce mi nibh, lacinia non, auctor nec, hendrerit eget,
nibh. Nulla lobortis tempus eros.
</p>
</div>
<div id="pie">
<p>Todos los derechos reservados</p>
</div>
</body>
</html>

Ya contarás lo que sea.

Mikel.

axterixv · #3 (**permalink**) 22/02/2007, 20:23

Mikel,

probado en GPA2 y IE6 mañana en la oficina pruebo IE7 y FF2.

De momento todo genial, solo aqui van las preguntas forzadas ^_^

Amanzaburros v1.0 iniciando...

1)height: auto !important;

¿Que hace esa instrucción? (En especial el !important al final)

2)Alguna razón en especial para usar 92%? No sera mucho en un monitor con mayor resolución o es el caso donde mejor nos arriesgamos antes de pecar?

Saludos Mikel y gracias de nuevo.

B** · #4 (**permalink**) 23/02/2007, 01:28

!importanthace que esa definicion de estilo se cumpla pase lo que pase, es decir, si en un estilo mas adelante la sobreeescribes, no va a importar, siempre tomara el el valor en el cual declaraste !important.

Mikmoro · #5 (**permalink**) 23/02/2007, 01:50

- Konqueror: Correcto
- Mozilla 1.7.11: Correcto
- Firefox 2.0: Correcto
- IE 7: Correcto

Una explicación un poquillo más extensa:

Si una propiedad lleva puesto important, significa que si hay otra igual en el estilo, prevalezca por encima de la segunda. De esa manera, si pones un height seguido de important y luego otra vez height sin más, los navegadores inteligentes harán caso a la que lleva important (la palabra en sí es muy clara).

¿Para qué sirve en este caso? Explorer no entiende la propiedad important, entonces siempre hace caso a la última propiedad que encuentre, de manera que si encuentra:

height: auto !important;
height: 92%;

Primero lee "auto", después lee "92%" para esa propiedad, y es la que interpreta. Los demás navegadores saben que aunque "92%" se lea después, deben ejecutar "auto" porque lleva ! important, pero explorer no, así que tenemos que Firefox interpreta height: auto; y explorer height: 92%;. Así de simple.

Lo del 92% es que como el pie está colocado fuera del contenedor, si pusieramos 100% el alto total sería de 100% + el alto del pie, es decir, siempre quedaría fuera de la vista, forzando el scroll, aunque el contenido fuera escaso. El 92 se debe al tamaño concreto del pie (3em), que habría que cambiar en función de este.

Mikel.

Subotai · #6 (**permalink**) 23/02/2007, 04:14

Muchas gracias a todos los que respondieron ayudando y explicando ^^ sobre todo explicando los truquitos del Css que es lo que más se agradece.

He conseguido adaptar vuestros consejos a mi página, por ahora todo va viento en popa.

axterixv · #7 (**permalink**) 23/02/2007, 10:17

Ok, gracias a todos, creo que ya tenemos otra solución tipo "universal" XD :)

axterixv · #8 (**permalink**) 14/03/2007, 09:33

Saludos: Solo dejando una pequeña actualización, esto resuelve un problema con una banda blanca que se muestra en algunos navegadores:

Esta solución fue públicada por SN en la lista de Ovillo:

Footer hasta el fondo v3 (Si pueden revisar se agradece)

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html lang="es">
<head>
    <style>
    /*inicio tags genéricos*/
*{
    padding:0;
    margin:0;
}
html {
    height:100%;
}
body {
    height:100%;
    font-family:verdana, arial, sans-serif;
    text-align:center;
}
p{
    padding:10px;
}
/*fin tags genéricos*/
/*inicio tags específicos*/
#contenedor {
    min-height:100%;
    width:100%;
    background:#A9A9A9;
    text-align:left;
    margin:0 auto;
}
* html #contenedor {
    height:100%;
}
#cabecera{
    position:relative;
    right:0px;
    top:0px;
    width:100%;
    height:10em;
    background:#000;
    color:#fff;
    text-align:center;
}
#cuerpo {
    padding:1em 1em 40px 1em;
    position:relative;
    background:#A9A9A9;
    text-align:center;
}
#contenido {
    background:#fff;
    text-align:justify;
    padding:10px;
    margin-bottom:20px;
}
#pie{
    height:3em;
    background:#000;
    color:#fff;
    position:relative;
    margin:0 auto;
    margin-top:-3em;
    width:100%;
}

/*fin tags específicos*/
    </style>
    <title>index</title>
</head>

<body>
        <div id="contenedor">
                <div id="cabecera">
                        <h1>CABECERA</h1>
                </div><!--fin cabecera-->
                <div id="cuerpo">
                        <h1>CUERPO</h1>
                        <div id="contenido">
                                <p>Lorem ipsum eum partem corrumpit et, qui puto habemus ea, id pro dolor nostro.
                                Tantas electram theophrastus nec cu. Sea libris prodesset ea, aeque facilisis id est, vituperatoribus concludaturque his ad. An modo kasd everti sed, in his alii singulis dignissim.
                                Ad cotidieque complectitur mei, ne iusto iisque mel, quidam feugiat ut est.</p>
                                <p>Lorem ipsum eum partem corrumpit et, qui puto habemus ea, id pro dolor nostro.
                                Tantas electram theophrastus nec cu. Sea libris prodesset ea, aeque facilisis id est, vituperatoribus concludaturque his ad. An modo kasd everti sed, in his alii singulis dignissim.
                                Ad cotidieque complectitur mei, ne iusto iisque mel, quidam feugiat ut est.</p>
                                <p>Lorem ipsum eum partem corrumpit et, qui puto habemus ea, id pro dolor nostro.
                                Tantas electram theophrastus nec cu. Sea libris prodesset ea, aeque facilisis id est, vituperatoribus concludaturque his ad. An modo kasd everti sed, in his alii singulis dignissim.
                                Ad cotidieque complectitur mei, ne iusto iisque mel, quidam feugiat ut est.</p>
                                <p>Lorem ipsum eum partem corrumpit et, qui puto habemus ea, id pro dolor nostro.
                                Tantas electram theophrastus nec cu. Sea libris prodesset ea, aeque facilisis id est, vituperatoribus concludaturque his ad. An modo kasd everti sed, in his alii singulis dignissim.
                                Ad cotidieque complectitur mei, ne iusto iisque mel, quidam feugiat ut est.</p>
                                <p>Lorem ipsum eum partem corrumpit et, qui puto habemus ea, id pro dolor nostro.
                                Tantas electram theophrastus nec cu. Sea libris prodesset ea, aeque facilisis id est, vituperatoribus concludaturque his ad. An modo kasd everti sed, in his alii singulis dignissim.
                                Ad cotidieque complectitur mei, ne iusto iisque mel, quidam feugiat ut est.</p>

                        </div><!--fin contenido-->
                </div><!--fin cuerpo-->
        </div><!--fin container-->
        <div id="pie">
                <h1>PIE</h1>
        </div><!--fin pie-->
</body>
</html>

Yo no noto el error que SN listo para presentar la tercera solución, sin embargo, varia gente lo reporto, asi que dejamos la nueva versión.

Saludos!

fearlex · #9 (**permalink**) 31/07/2007, 09:13

Pues a mi la solucion que dio Mikel me funciono de maravillas, ya habia perdido los sesos tratando de lograr un stiky footer, me fui pal Google, y todas las soluciones que dieron no se acomodaban a mi layout, hasta que dije, me voy a dar una vuelta por el foro de CSS de Forosdelweb, y a la primera busqueda que hice, VOILA, la solucion perfecta mi problema. Me alegro saludos y gracias por compartir :D

talmente · #10 (**permalink**) 18/04/2008, 10:26

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
.flex {
	display: block;
}
* html  .flex {
	height: 1%;
}
#Tabla_01 #contenido {
	width: 400px;
	float: right;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: -2000px;
	margin-left: 0px;
	padding-bottom: 2000px;
}
#pie  {
	background-color: #CC0099;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
}
#Tabla_01  #logo  {
	background-color: #006699;
}
#Tabla_01  {
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	background-color: #990099;
	overflow: hidden;
}
#titulo {
	background-color: #FF3366;
}
#Tabla_01 #menusup {
	height: 50px;
	background-color: #00CC99;
}
#Tabla_01 #menusupder {
	float: right;
	width: 200px;
	background-color: #FF66CC;
	margin-bottom: -2000px;
	padding-bottom: 2000px;
}
#Tabla_01 #menuleft {
	background-color: #9999FF;
	float: left;
	width: 200px;
	margin-bottom: -2000px;
	padding-bottom: 2000px;
}
#Tabla_01 #logo #buscar {
	background-color: #FF33CC;
	height: 50px;
	width: 800px;
}

#Tabla_01 #content {
	float: left;
	width: 400px;
	background-color: #006633;
}
</style>
</head>

<body>
<div id="titulo">titulo</div>
<div class="flex" id="Tabla_01">
  <div id="logo">menu</div>
   
  <div class="flex" id="menusupder">
    <p>munu dereccha</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div> 
  <div class="flex" id="menuleft">menu izquierda</div>
  <div id="contenido"> contenido contenido contenido contenido contenido
   contenido contenido contenido contenido contenido contenido contenido
    contenido contenido contenido contenido contenido</div>
</div>
 <div id="pie">
   <p>pie</p>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
 </div>
</body>
</html>

esto es definitivo con esto que te mando si lo controlas puedes hacer lo que quieras. jaimesimo.net

ssclamp · #11 (**permalink**) 20/04/2008, 19:01

Este código de talmente no funciona. El pie queda obviamente al final de la página pero no queda fijo al final de la pantalla.

No funciona ni en IE6, IE7 , Firefox ni en Opera.

Saludos