[Ovillo] Problemas con técnica footerStickAlt
Reynier Perez Mira
rperezm en estudiantes.uci.cu
Lun Jul 16 23:23:41 UTC 2007
Hola listeros:
He estado usando está técnica desde hace un tiempo atrás y no ha sido hasta hoy que me he dado cuenta de que cuando el contenido es muy grande la misma falla. Mi HTML luce como sigue:
-----------------------------------
<div id="contenedor">
<div id="encabezado">
<div id="registro">Login</div>
</div>
<div id="navegacion">navegacion</div>
<div id="contenido">contenido</div>
<div id="derecha">derecha</div>
</div>
<div id="clear"> </div>
<div id="pie">pie</div>
-----------------------------------
El CSS aplicado a este es el siguiente:
-----------------------------------
* { margin:0; padding:0; }
html { height: 100%; }
body {
height: 100%;
margin: 0px;
padding: 0px;
background-color: #000;
text-align: center;
font-family: Verdana;
font-size: 62.5%;
color: #FFF;
}
* html #contenedor {
height: 100%;
}
#contenedor {
position:relative;
height:100%;
width: 946px;
margin: 0 auto;
text-align: left;
}
* html #pie { margin-top: -40px; }
#pie {
position:relative;
height: 40px;
margin:-40px auto 0 auto;
background-color: #112B4A;
padding: 2px 0 0 0;
line-height: 25px;
width: 946px;
margin: 0 auto;
text-align: left;
color: #fff;
}
#clear {
clear: both;
line-height: 1px;
}
#encabezado {
background: url(../../images/default_theme/encabezado.png) #112B4A no-repeat top left;
height: 156px;
margin: 0 0 3px 0;
}
#registro {
float: right;
height: 156px;
width: 210px;
padding: 0 0 0 3px;
}
#contenido {
width: 746px;
float: left;
height: 100% auto;
margin: 5px 5px 5px 0;
}
#derecha {
width: 195px;
background-color: #2B415B;
float: left;
margin: 6px 0 2px 0;
height: 100%;
}
#navegacion {
background-color: #112B4A;
clear: both;
padding: 7px 5px;
}
-----------------------------------
Me está pasando que cuando lo que está contenido dentro del DIV es muy grande "contenido" entonces el DIV pie no se corre hacia abajo y se me pone por encima de "contenido". ¿Qué es lo que estoy haciendo mal?
Salu2
--
Ing. Reynier Pérez Mira
Universidad de las Ciencias Informáticas
Más información sobre la lista de distribución Ovillo