csemall

첨부된 이미지 처럼, 좌측 끝까지 딱 떨어지는 사이드메뉴를 구현했습니다.

그리고, 좌측 메뉴는 상단 하단 두개로 이루어져 있습니다.
상단 부분은 사이드바의 헤더영역이고, 하단 부분은 실제 메뉴 리스트가 나오는 부분입니다.

이슈는 우측 컨텐츠 영역의 세로폭이 가변적이라는 것입니다. 당연한 이야기이지만, 컨텐츠의 세로폭은 예측할 수 없습니다. 상품리스트 뿐 아니라, 상품 설명에 들어가면, 세로폭은 모두 다를 수 밖에 없습니다.

크게 4개의 영역으로 나누어져 있는데, 좌측 상단 헤더 부분 세로폭은 고정, 좌측하단 우측상하단은 가변 세로폭입니다. 처음에는 rowspan으로 처리하려고 했는데, 크롬이나 사파리에서는 정상적으로 보이는데, IE에서는 버그처럼 동작을 합니다.

그래서, HTML 테이블 두개와 jQuery로 만들었습니다. 코드는 아래에서 확인 가능합니다.
jQuery에게 땡큐~^^

http://jsfiddle.net/BjJxy/3/