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:
<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;
}