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

Se puede ver un ejemplo en http://www.treeweb.es/ShareCode/33403a4d1ec927c3e2538e9bd240cd51 [pantalla completa]

Código

HTML:

    0 
    1 <div id="pan_superior">
    2     <br>
    3     ZONA FIJA SUPERIOR (64px de altura)
    4 </div>
    5 
    6 <div id="pan_central">
    7 
    8     <div id="pan_derecho">
    9         PANEL DERECHO (100px de ancho)
   10     </div>
   11     
   12     <div id="pan_izquierdo">
   13         PANEL IZQUIERDO (200px de ancho)
   14     </div>
   15     
   16     <div id="pan_centro">
   17         <div class="margen">
   18             <h1>Panel central</h1>
   19             Esta maqueta se adapta automáticamente para ocupar
   20             el 100% de la pantalla y dispone de dos paneles
   21             fijos arriba y abajo para añadir, por ejemplo, 
   22             barras de botones y mensajes de información.
   23             La banda central se ajusta verticalmente y dentro
   24             contiene dos bandas laterales fijas y una zona en
   25             el centro que se ajusta horizontalmente.<br>
   26             bla bla bla...<br>
   27             <br>
   28             bla bla bla...<br>
   29             <br>
   30             bla bla bla...<br>
   31             <br>
   32             bla bla bla...<br>
   33             <br>
   34             bla bla bla...<br>
   35             <br>
   36             bla bla bla...<br>
   37             <br>
   38             bla bla bla...<br>
   39             <br>
   40             bla bla bla...<br>
   41             <br>
   42             bla bla bla...<br>
   43             <br>
   44         </div>
   45     </div>
   46     
   47 </div>
   48 
   49 <div id="pan_inferior">
   50     ZONA FIJA INFERIOR (32px de altura)<BR>
   51     RECUERDA, QUE PUEDES PULSAR EL BOTÓN DUPLICAR
   52     PARA QUE TÚ MISMO PUEDAS EDITAR LA PLANTILLA
   53     EN LÍNEA.
   54 </div>
   55 
   56 
   57

CSS:

    0 
    1 HTML, BODY { /* Esto es importante */
    2     display:block;
    3     margin:0;
    4     padding:0;
    5     height:100%;
    6     overflow:hidden;
    7     /* Estilo */
    8     font-family:sans-serif;
    9 }
   10 
   11 #pan_superior {
   12     position:absolute;
   13     top:0;
   14     left:0;
   15     right:0;
   16     height:64px;
   17     overflow:hidden;
   18     /* Estilo: */
   19     background-color:#E0E0E0;
   20     text-align:center;
   21 }
   22 
   23 #pan_inferior {
   24     position:absolute;
   25     bottom:0;
   26     left:0;
   27     right:0;
   28     height:32px;
   29     overflow:hidden;
   30     /* Estilo */
   31     background-color:#D0D0D0;
   32     text-align:center;
   33     font-size:13px;
   34 }
   35 
   36 #pan_central {
   37     position:absolute;
   38     top:64px;
   39     bottom:32px;
   40     left:0;
   41     right:0;
   42     /* Estilo */
   43     background-color:#E0E0E0;
   44 }
   45 
   46 
   47 #pan_izquierdo {
   48     height:100%;
   49     overflow-y:scroll;
   50     width:200px;
   51     float:left;
   52     /* Estilo */
   53     background-color:#A0C0F0;
   54     text-align:center;
   55 }
   56 
   57 #pan_derecho {
   58     height:100%;
   59     overflow-y:scroll;
   60     width:100px;
   61     float:right;
   62     /* Estilo */
   63     background-color:#A0C0E0;
   64     text-align:center;
   65 }
   66 
   67 #pan_centro {
   68     overflow:scroll;
   69     height:100%;
   70     /* Estilo */
   71     background-color:#F0F0F0;
   72 }
   73 
   74 .margen { /* Estilo */
   75     padding:16px;
   76     }
   77