Comment mettre en œuvre le motif de conception de conception de toile dans css?

Question

Je ne sais pas si la disposition en trois colonnes est le bon terme, mais voici ce que je veux faire.

Je veux un élément "central" pour remplir tout l'espace disponible (si possible sans barres de défilement). "Docké" à gauche et à droite, il devrait y avoir un élément chacun, affichant des listes avec des outils pour l'élément du milieu. Fondamentalement, je décris le motif de conception de toile des interfaces de conception de Jenifer Tidwell.

Answer 1

Une mise en page trois colonnes ne sont pas (nécessairement) le même que le motif de la toile:

Voici le code html:

<div class="canvas-pattern"> 
    <div class="canvas-pattern-left"></div> 
    <div class="canvas-pattern-canvas"></div> 
    <div class="canvas-pattern-right"></div> 
</div> 

et le 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 left and right */ 
.canvas-pattern{ 
    position: relative; 
} 

.canvas-pattern-right{ 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

.canvas-pattern-left{ 
    position: absolute: 
    top: 0; 
    left: 0; 
}