HTML 배경 크기 조정 문제

Question

오른쪽에 왼쪽 탐색 모음과 큰 내용 영역이있는 매우 기본적인 사이트가 있습니다. 그들은 각각 다른 배경을 가지고 있습니다.

콘텐츠와 navbar가 모두 동일한 높이가되고 배경을 유지하기를 원합니다. 어떻게해야할지 모르겠으므로 div에 넣고 배경을 내비게이션 막대의 배경으로 설정했습니다. 내용이 확장되면, 컨테이너 div 밀어 왼쪽의 올바른 배경을 보여줍니다

http://jsfiddle.net/8Ngey/3/embedded/result/

탐색 내용보다 큰, 그러나, 배경이 잘못 :

http://jsfiddle.net/8Ngey/2/embedded/result/

을

내가하려는 일을 수행하는 올바른 방법은 무엇입니까? 또한 사이드 노트에서, 포함 div가 왼쪽으로 떠올리게 설정하지 않는 한 div가 내부에있을 때 높이가 0px 인 이유는 무엇입니까?

편집 :

내가 원하는 명확히하려면 :

• 페이지 한 내용으로
• 탐색 모음 한 페이지로
• 내용 한 페이지
• 콘텐츠 및 탐색 등 배경색을 유지한다.

Answer 1

아, CSS에서 같은 높이의 컬럼이 거의 불가능하다는 것을 알게되었습니다. 저기 몇 가지 hackish 솔루션이 있지만 가장 간단한? Faux columns.

너비가 1 픽셀이고 높이가 1 픽셀 인 이미지를 만들고 배경에 수직으로 반복하면됩니다 (div). 첫 번째 100px 파란색을 만들고 다음 900px 녹색을 만듭니다. 아무도 그 차이를 알 수 없습니다! (그들은 가치가보다 일반적으로 더 문제가 있습니다)

#background { background: url(file.png) repeat-y; } 

More techniques.

---

두 번째 질문에 대답하십시오 : 떠 다니는 요소는 부모에게 높이를 추가하지 않습니다 (기본적으로). 이 문제를 해결하려면 래퍼 div (example)에 overflow: hidden 또는 overflow: auto을 설정

#wrapper { background:black; overflow:hidden; }