Как реализовать шаблон дизайна дизайна холста в css?

Question

Не уверен, что три столбца соответствуют правильному термину, но вот что я хочу сделать.

Я хочу, чтобы один «средний» элемент заполнял все свободное пространство (если возможно без полос прокрутки). «Пристыкован» влево и вправо, должен быть каждый элемент, отображающий списки с инструментами для среднего элемента.

Баскиально, я описываю шаблон дизайна холста из проектных интерфейсов Jenifer Tidwell.

Answer 1

Макет три столбца (не обязательно) такой же, как шаблон холст:

Вот 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 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; 
}