두 컨테이너의 CSS 동적 레이아웃

Question

내가 도움이 될지 궁금한 흥미로운 레이아웃 디자인 문제가 있습니다.

두 개의 컨테이너가 서로 옆에 있습니다. 대부분의 컨테이너는 정적으로 크기가 정해져 있습니다. 왼쪽의 것은 동적으로로드 된 내용을 기반으로 증가해야합니다. 꽤 많은 비트 또는 단일 데이터 세트 만 가질 수 있습니다. 이제 오른쪽 컨테이너가 커지면서 항상 왼쪽 컨테이너 옆에 있어야합니다.

여기 까다로운 부분이 있습니다. 왼쪽 컨테이너는 줄 바꿈을 할 수 없으며 스크롤 막대가 나타나는 지점에서 화면의 나머지 너비까지 채워야합니다. 이 시점에서 오른쪽 컨테이너는 화면 가장자리 옆에 있습니다.

왼쪽 컨테이너가 항상 나머지 화면 부동산을 차지하는 곳에서 작동하도록 할 수 있지만 왼쪽에 약간의 데이터 만있는 경우에도 오른쪽 컨테이너를 오른쪽으로 끝까지 밀어 넣습니다.

또한 데이터가 커지면서 오른쪽이 왼쪽 옆에 머물러 있어도 오버플로 스크롤바가 나타나지 않습니다. 나는 이러한 모든 요구 사항을 해결하는 방법에 대해 궁금합니다.

나는 또한 그냥 정말 화면 해상도 성장의 요구 사항을 해결하지 않고, 여전히 데이터의 작은 양의

편집에 대한 해결되지 않고 모든 것을 폭을 설정할 수 있습니다 이미지를 첨부 내 현재 레이아웃. 브라우저의 너비를 100 % 사용하여 "꽉 찼습니다." 필요한 것은 데이터 열이 너무 작아 져 더 이상 스크롤되지 않으면 오른쪽 부분을 왼쪽으로 이동시키는 것입니다.

Answer 1

나는 당신이 성취하려고하는 것의 jsfiddle을 함께 쓴다.

1. 오른쪽 열은 너비와 위치가 고정되어 있습니다.
2. 왼쪽 열의 너비가 확장되고 내부 콘텐츠를 표시하기에 너비가 너무 작아지면 스크롤됩니다. HTML 여기 http://jsfiddle.net/MwdED/

   됩니다 : 여기

은 예입니다

<div class="container"> 
    <div class="col-left"> 
     <div class="col-content"> 
      <div class="wide-content"> 
       THis is some wide content, sitting inside of the left column. 
      </div> 
     </div> 
    </div> 
    <div class="col-right"> 
     <div class="col-content"> 
      This is the right column. It's fixed in width. 
     </div> 
    </div> 
</div> 

그리고 악셀 제공 무엇을 복용 CSS

.container { 
    position: relative; 
    min-width: 500px; /*make sure the columns don't collapse on top of each other*/ 
} 

.col-left { 
    padding-right: 200px; /*make room for right column*/ 
} 

.col-left .col-content { 
    min-width: 300px; /* the minimum width, before overflow scrolling occurs */ 
    overflow: auto; 
} 

.col-right { 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 200px; 
} 

.wide-content { 
    background: red; 
    width: 1000px; 
} 

Answer 2

, 내가 좋아하는 확실히 뭔가를 생각 이것은 효과가있다. 그 목적은 두 용기를 유체로 만들어서 어느 것이 자라나거나 줄어든다 할지라도 다른 쪽이 차이를 보일 것이지만 어떤 이유로 용기가 서로 흘러 나올 수 없게하는 것이었다.

.col-left .col-content { 
    min-width: 20%; /* the minimum width, before overflow scrolling occurs */ 
    max-width: 80%; 
    overflow: scroll; 
} 

.col-right { 
    position: absolute; 
    right: 0; 
    top: 0; 
    min-width: 20%; 
    max-width: 80%; 
}