Gracias, Wikipedia.
TreeWeb::Artículos::HTML y CSS::Paneles de backend
Permalink: http://www.treeweb.es/u/1116/ 17/06/2011

Paneles de backend

Descripción

Una maquetación con CSS que permite montar paneles que se adapten de forma automática al tamaño de la ventana. Especialmente útil para programar backends de administración en los que existen zonas como barras de herramientas o de estado

Ejemplo

Código

HTML:
<div id="pan_superior"> <br> ZONA FIJA SUPERIOR (64px de altura) </div> <div id="pan_central"> <div id="pan_derecho"> PANEL DERECHO (100px de ancho) </div> <div id="pan_izquierdo"> PANEL IZQUIERDO (200px de ancho) </div> <div id="pan_centro"> <div class="margen"> <h1>Panel central</h1> Esta maqueta se adapta automáticamente para ocupar el 100% de la pantalla y dispone de dos paneles fijos arriba y abajo para añadir, por ejemplo, barras de botones y mensajes de información. La banda central se ajusta verticalmente y dentro contiene dos bandas laterales fijas y una zona en el centro que se ajusta horizontalmente.<br> bla bla bla...<br> <br> bla bla bla...<br> <br> bla bla bla...<br> <br> bla bla bla...<br> <br> bla bla bla...<br> <br> bla bla bla...<br> <br> bla bla bla...<br> <br> bla bla bla...<br> <br> bla bla bla...<br> <br> </div> </div> </div> <div id="pan_inferior"> ZONA FIJA INFERIOR (32px de altura)<BR> RECUERDA, QUE PUEDES PULSAR EL BOTÓN DUPLICAR PARA QUE TÚ MISMO PUEDAS EDITAR LA PLANTILLA EN LÍNEA. </div>
CSS:
HTML, BODY { /* Esto es importante */ display:block; margin:0; padding:0; height:100%; overflow:hidden; /* Estilo */ font-family:sans-serif; } #pan_superior { position:absolute; top:0; left:0; right:0; height:64px; overflow:hidden; /* Estilo: */ background-color:#E0E0E0; text-align:center; } #pan_inferior { position:absolute; bottom:0; left:0; right:0; height:32px; overflow:hidden; /* Estilo */ background-color:#D0D0D0; text-align:center; font-size:13px; } #pan_central { position:absolute; top:64px; bottom:32px; left:0; right:0; /* Estilo */ background-color:#E0E0E0; } #pan_izquierdo { height:100%; overflow-y:scroll; width:200px; float:left; /* Estilo */ background-color:#A0C0F0; text-align:center; } #pan_derecho { height:100%; overflow-y:scroll; width:100px; float:right; /* Estilo */ background-color:#A0C0E0; text-align:center; } #pan_centro { overflow:scroll; height:100%; /* Estilo */ background-color:#F0F0F0; } .margen { /* Estilo */ padding:16px; }