CSS에서 캔버스 디자인 디자인 패턴을 구현하는 방법은 무엇입니까?

Question

3 열 레이아웃이 올바른 용어인지는 모르겠지만 여기에 내가하고 싶은 것이 있습니다.

하나의 "중간"요소가 사용 가능한 모든 공간을 채우 길 원합니다 (가능한 경우 스크롤 막대없이). 왼쪽과 오른쪽에 "도킹"되어 있으면 가운데 요소에 대한 도구가있는 목록이 표시되는 요소가 각각 있어야합니다.

Bascially, 저는 Jenifer Tidwell의 Designing Interfaces에서 Canvas Design Pattern을 설명합니다.

Answer 1

3 열로 배치가 아니다 (반드시) 캔버스 패턴과 동일한 :

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