CSS - 알 수없는 높이의 머리글을 사용하여 100 % 높이의 2 열 레이아웃을 만드는 방법

Question

나는 목표를 달성해야하며 실제로 붙어 있습니다. 더 설명하기 위해, 내가 얻을 필요가 무엇의 사진 올려했습니다

가 처음에는 내가 div의 함께 할 것을 시도했다, 그러나 그것은 width 때문에 파이어 폭스에서 완전히 다른 모습 속성. 필자의 주요 관심사는 IE8 비표준 모드 (요구 사항)이지만 Firefox에서 다소보기 흉하게 보이기를 원했습니다.

두 열로 된 테이블로 작업하려고했는데 IE에서는 잘 작동했지만 파이어 폭스에서는 다소 잘 돌아 갔지만 몇 가지 이유로 오른쪽 열의 내용이 화면보다 넓어지면 테이블은 수용 할 수없고 내 콘텐츠는 테이블에 의해 수평으로 자르면 스크롤 막대가 표시되지 않습니다.

또한 컨테이너를 fixed 인 Stackoverflow의 이전 게시물을 살펴 보았지만 IE8 비표준 모드에서는 작동하지 않습니다.

이 작업을 수행하는 방법에 대한 아이디어가 있으면 언제든지 알려주십시오.

Answer 1

는 다음과 같이 할 수있는 일 수 있습니다

.left{ 
    float:left; 
    position:absolute; 
    width:200px; 
    background:red; 
    border:2px solid #000; 
    top:200px; 
    bottom:0; 
    left:0; 

} 
.right{ 
    overflow:hidden; 
    background:green; 
    position:absolute; 
    top:200px; 
    bottom:0; 
    left:204px; 
    right:0; 
    border:10px solid #000; 
} 

html, body{ 
    min-height:100%; 
    height:100%; 
} 
.header{ 
    width:100%; 
    height:200px; 
    background:yellow; 
} 

확인이 http://jsfiddle.net/QHTeS/

Answer 2

이 도움이 될 것입니다 - 아주 기본적인 예.

http://jsfiddle.net/pRAgY/

는 폭을 알고 avalible 100 % 폭 이상가는 6 픽셀 경계 (총 24 픽셀)로, 우측 컨테이너의 너비를 조정해야합니다.