Posición del pie de página
En footer.html, el div de pie de página está contenido habitualmente dentro del div de la página, por ejemplo en moodle/theme/standardblue/footer.html
</div> <!-- final del div content --> <div id="footer"> <hr size="1" noshade="noshade" /> <?php echo $loggedinas ?> <?php echo $homelink ?> </div> <!-- final del div footer --> </div> <!-- final del div page --> </body> </html>
Cambie esto para que el div del pie de página aparezca tras el div de página
</div> <!-- fin del div content --> </div> <!-- fin del div page --> <div id="footer"> <hr size="1" noshade="noshade" /> <?php echo $loggedinas ?> <?php echo $homelink ?> </div> <!-- end div footer --> </body> </html>
Después en el fichero de composición CSS, añada lo siguiente
html, body {
margin: 0; padding: 0;
height: 100%;
}
#page {
margin: 0; padding: 0;
min-height: 100%; _height: 100%; /* min-height para navegadores inteligentes
_height para Internet Explorer ;-)*/
}
#content {
padding-bottom: 105px;
}
#footer {
margin: -100px 0 0 0; padding: 0 0 10px 0; /* suponemos un pie de página de altura 100px */
}
Esto crea un div que siempre debería llenar al menos la altura del puerto de vista del navegador, independientemente de la cantidad de contenido de la página. El pie de página se posiciona bajo este div y se empuja hacia arriba usando un margen superior negativo. También tenemos que permitir algo de espacio adicional bajo el contenido, de forma que cuando el pie de página se reposicione no sobreescriba nada. 105 pixels de padding se añaden en la parte inferior del div de contenido para hacer sitio para el pie de página, y luego el pie de página se mueve hacia arriba 100 pixels desde su posición.
