3 열 레이아웃 수수께끼, 이번에는 머리글과 바닥 글이 없습니다.

Question

이 내용은 Web 1.0 초보자 용 질문 중 하나임을 알고 있습니다 만, 슬프게도 나는 스스로에게 물어볼 수있는 입장에 서 있습니다. 나는 이런 종류의 레이아웃을 필요로하지 않는 사이트를하고 있으며 이제 3 열 레이아웃, 고정 너비의 가운데 열을 가진 친구를 위해 하나를보고 있습니다 ... 머리글이나 바닥 글 상자 요소가없고 꼬집어서 세 열은 모두 화면 크기에 맞게 높이가 늘어납니다.

이 문제를 더욱 악화시키는 것은 body에 하나의 색상 또는 배경 이미지가 있고 가운데 열에 자체 배경색이나 이미지가 있다는 것입니다.

시각적으로는, 페이지 레이아웃과 같은 것이다 : 나는 분명히 가짜 열 및 기타 절대적/상대적 위치와 충돌 절대 위치 (어도비 포럼)에 대한 몇 가지 흥미로운 인수를 읽고

+----------+---------------+----------+ 
|nothing |only content |nothing | 
|here  |will be here |here  | 
|just the |w/a different |just the | 
|body b/g |background  |body b/g | 
|color or |color or  |color or | 
|image  |image   |image  | 
|   |    |   | 
|   |all 3 columns |   | 
|   |always fill |   | 
|   |screen height |   | 
+----------+---------------+----------+ 

. 이상적으로 나는 모든 것을 수레로하고 싶지만 이것을 달성하는 가장 효율적인 방법은 확실치 않습니다. 지금까지 나는 단지 무릎에 떨어 졌기 때문에 아무 것도 시도하지 않았습니다. 다시 말하지만, 이것이 기본이라는 것을 알고 있습니다. 그러나 하나의 B/G 컬러와 중심 요소를 사용하여 사이트를 만들 때 '왜 이렇게 어려운가?'라고 생각하고 있습니다.

Answer 1

중간 부분이 사이드 열보다 더 넓게 당신이하려는 경우 확실하지 - 당신이 할 경우는 33.3 %에 비해 넓게 할 것입니다. 신장

은, 당신이 원하는 :

html, body { 
     height: 100%; 
    } 

그런 다음 중앙 사업부가

position: relative; 
    height: 100%; 
    margin: 0 auto; 

인지 확인

완벽 여기 http://jsfiddle.net/mWqwD/

Answer 2

가운데 열에 너비를 설정하고 margin: auto으로 지정하십시오. 이는 블록 레벨 요소의 양쪽에서 등 마진을 적용합니다.

CSS

#center { 
    width: 33.33%; 
    margin: auto; 
}