Buenos tiempos eran esos donde reinaban los frames… no había que pensar en semántica, preocuparse por compatibilidad… todo se veía en Netscape y Explorer. Eran, como quien dice, browsers carne de perro. Pero ahora son otros tiempos, hay más conciencia de respetar las reglas para una mejor compatibilidad entre navegadores y plataformas, como se dice: mayor accesibilidad. Bueno, a lo que voy con todo este blablabla es que mostraré ahora una manera de construir un layout similar a los viejos frames, tan mal mirados actualmente. Puede ser verdaderamente útil, dependiendo del uso que el diseñador / desarrollador estime darle. La clave: position y overflow .

Comenzaremos por diagramar básicamente el sitio, con un encabezado (header), cuerpo del contenido (container) y un pie de página (footer).

Ver Layout Básico 1

Aquí está la hoja de estilos, nada fuera de lo normal

Bien, la clave ahora está en reordenar nuestro layout y aplicar los position de acuerdo a cada parte de nuestro sitio. La lógica es la siguiente: primero en nuestro HTML estará el #container, el DIV que soporta nuestro contenido. Luego, estarán los dos siguientes DIV’s: #header y #footer. Estos dos tienen position: absolute, donde se marcarán sus posiciones a través de top y bottom y no se moverán de ahí. El contenido pasará por detrás de estos dos DIV’s absolutos, y el #container tiene un position: fixed, además de overflow: auto para que su contenido pueda fluir, comportándose como un FRAMESET (incluso con barra de scroll).

Entonces, los cambios principales en la hoja de estilos fueron:

#header {
   top: 0;>
   left: 0;
   width: 100%;
   height: 100px;
   position: absolute;
   overflow: auto;
   background-color: #C00;
   border-bottom: 5px solid #900;
}
#container { top: 105px; left: 0; bottom: 50px; right: 0; position: fixed; overflow: auto; background-color: #FFF; padding: 20px; }
#footer { bottom: 0; left: 0; width: 100%; height: 45px; overflow: auto; position: absolute; background-color: #C00; border-top: 5px solid #900; }

Ver Resultado Final

Ver Hojas de Estilos