Lendo Interfaces de design de Jenifer Tidwell, que é um livro sobre padrões de design para design de IU, aprendi um nome para interfaces como MS Paint e semelhantes: The Canvas Pattern.
O que eu queria fazer é criar uma tela de tela inteira, com “barras de ferramentas” encaixadas à esquerda e à direita.
HTML:
<div class="canvas-pattern">
<div class="canvas-pattern-left"></div>
<div class="canvas-pattern-canvas"></div>
<div class="canvas-pattern-right"></div>
</div>
CSS:
/* canvas-pattern */
/** full screen */
.canvas-pattern-canvas{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -10;
background-color: lightblue;
}
/*** centered within fullscreen */
.canvas-pattern-canvas > div {
width: 300px;
position: fixed;
top: 50%;
left: 50%;
}
/** docking ... */
.canvas-pattern{
position: relative;
}
/*** ... right */
.canvas-pattern-right{
position: absolute;
top: 0;
right: 0;
}
/*** ... left */
.canvas-pattern-left{
position: absolute;
top: 0;
left: 0;
}
Aproveitar!