유체 높이 및 배경 이미지가 일치하는 열

Question

머리글, 바닥 글 및 두 개의 열 중심 영역을 사용하는 내 사이트의 새 레이아웃 작업 중입니다. 두 개의 기둥은 유체 높이와 너비 인 주요 내용 영역과 유체 높이와 고정 너비 인 오른쪽 세로 막대로 구성됩니다. 이전에 비슷한 레이아웃을했는데 두 가지 배경 이미지 (사이드 바에 하나, 컨텐트 영역에 하나)를 사용하는 것에 달려 있습니다.

적절한 HTML & CSS를 사용하여 구현하면됩니다. 따라서 어떤 열의 내용이 더 길어도 관계없이 두 열의 배경 이미지가 항상 같은 높이가됩니까?

JavaScript를 사용하여이 기능을 시도했지만 콘텐츠 영역에 이미지가있는 경우 제대로 작동하지 않습니다. 나는이 방법을 어떤 식 으로든 사용하지 않는 것을 선호한다.

도움을 주시면 대단히 감사하겠습니다.

예제를 제공하기 위해 http://staging.jamesarmes.net/jimmyssandbox에 스테이징 환경을 설정했습니다. 이 환경은 완성 된 제품이 아니지만 더 이상 이동하기 전에 콘테이너를 제어해야합니다. 나는 http://www.jamesarmes.net/files/jimmyssandbox-theme1.png에 내 디자인을 게시했다.

Answer 1

#container에 반복 배경을 적용, 당신은 faux columns를 사용하려면이

#container 
|-- #main-content 
|-- #sidebar 

같은 HTML 구조 무언가를 가정. 각각이 수직적으로 반복되는 배경이며, 각각의 문제는 화해 할 수없는 고도에서 반복해야하는 것과 같은 문제가없는 한 바로 사용할 수 있습니다.

하지만 주 내용 영역이 유동적이라고 말하기 때문에 몇 가지 문제가 있습니다. "Creating Liquid Faux Columns"이 도움이 될 수 있습니다.

번갈아서 나는 일반 가짜 열을 사용하고 하나의 비 의미 론적 의미 인 div을 희생하여 전체 높이를 #container까지 늘려 conflicting absolute positions으로 만들 것을 고려할 것입니다. 일반 가짜 열은 고정 너비 열을 덮을 수 있도록 배치되며 매우 넓음은 반복적 인 배경의 반대쪽 끝을 포함하는 절대적으로 배치 된 div이 찰 때까지 유체 열의 배경을 제공합니다. 구조는 단지

입니다

#container 
|-- #bghack 
|-- #main-content 
|-- #sidebar 

#bghack은 형제 뒤에 있습니다.