Mantén ese Footer en su sitio
Crear un sitio web básico es algo que, estoy segura, la mayoría de nosotros hacemos casi con los ojos cerrados. No obstante, ¿qué pasa cuando la página tiene poco contenido y se nos «sube» el pie de la página? En navegadores que entiendan de CSS la solución es sencilla pero para Internet Explorer se hace necesario recurrir a hacks.
Imaginemos un estructura básica de página:
- <body>
- <!-- Contenido: donde reside todo el contenido de la página salvo el pie -->
- <div id="content">
- </div>
- <!-- Footer: Pie de página para enlaces, copyrights etc. -->
- <div id="footer">
- Este es el pie... Abajo, Abajo
- </div>
- </body>
Ahora el CSS, que no requiere de muchas más explicaciones:
- html {
- height: 100%;
- }
- body {
- height: 100%;
- margin: 0;
- padding: 0;
- text-align: center;
- font: 400 0.8em verdana, arial, sans-serif;
- background: #666;
- color: #EEE;
- }
- #footer {
- float: left;
- width: 100%;
- position: relative;
- z-index: 3;
- font-size: 0.85em;
- margin-top: -1.5em;
- background: #000;
- }
- #content {
- height: 100%;
- min-height: 100%;
- text-align: left;
- /*hack de max-width para Explorer que no comprende la propiedad css */
- width: expression(document.body.clientWidth > 1000 ? "1000px" : "94%");
- max-width: 1000px;
- margin: 0 auto;
- }
Simple y, como siempre que envuelve al explorer, no valida. Podéis dejar la hoja de estilo un poco más limpia con comentarios condicionales y hojas de estilo específicas para explorer.
