전체 높이 유체 이미지와 한 줄에 div. Div는 나머지 가로 공간을 가져야합니다.

Question

div와 투명 GIF가 높이와 관련된 너비와 함께 왼쪽 여백으로 사용됩니다.
예를 들어 창 높이가 480px 인 경우 "여백"은 48px입니다.

콘텐츠 분할을 나머지 너비로 만들려면 어떻게해야합니까?
해결책은 js가 아니고 IE9 & Android 호환이어야합니다.

N.B. 이미지가 있습니다 : 그것은뿐만 아니라 성장, 축소 할 수 있습니다에만이 방법을 보이기 때문에 ... '디스플레이 테이블 셀을'

<--------------------- 100% WINDOW WIDTH ----------------> 
,--------------------------------------------------------,^
||      ||    |    | | 
||  IMG 1x10 px  || CONTENT DIV | FREE SPACE | | 
|| display: table-cell ||    |    | | 100% WINDOW HEIGHT 
|| height 100 %  || height 100 % |    | | 
||      ||    |    | | 
'--------------------------------------------------------' ь 

거의 작업 솔루션 : http://jsfiddle.net/koutsenko/g3fxh3k6/8/ 작품 바이올린에, 독립 HTML을하지 실행할 때 예상대로 . 하지만 문제가 있습니다. 작은 높이에서 "여백 이미지"에 추가 여백이 있습니다.

UPD :이 작업은 javascript를 사용합니다. 비싸지 않은 CSS 만 사용하여이 작업을 해결하는 것은 불가능합니다.

Answer 1

귀하의 질문에 대한 오해가있을 수도 있지만 왼쪽 칸에 상관없이 나머지 행을 처리하기 위해 콘텐츠 div를 얻는 방법을 의미한다고 생각합니다.

나는 솔루션 (마크 업을 조정할 수 있습니다 가정) 몇 가지 단계가 있다고 생각 :

1. 이미지에 직접 사업부에 이미지를 넣고 적용 display: table-cell을 그 대신의.
2. div/container가 모두 으로 바뀌면 셀에는 모두 display: table이 필요합니다.
3. 오른쪽에있는 "content div"도 display: table-cell 집합이 필요합니다.

display: table 및 table-cell를 사용하여, 그것은 실제 HTML table 요소의 구조를 모방하기 위해 정기적으로 마크 업을 사용하는 것이 가장 좋습니다.

참고 1 : 단지 여백을 만들기 위해 이미지를 사용하는 경우 구식 투명 GIF 트릭 대신 CSS 패딩/여백을 사용하는 것이 좋습니다. 나는 왜 당신이 이것을하고 있었는지 정말로 명확하지 않았습니다.

참고 2 : 문제가 해결되지 않으면 JSFiddle을 제공하십시오. 다시 방문해 주시면 기쁩니다. 행운을 빌어 요.