html 레이아웃 문제 :이 레이아웃을 달성하는 방법은 무엇입니까?

Question

세 가지 열 레이아웃이 있습니다. 세 번째 열에는 두 개의 div가 있습니다. 첫 번째 div는 고정되어 있습니다. 두 번째 div는 최소 높이가 50px입니다. 두 번째 div 안의 텍스트 내용이 증가하면 높이가 세 번째 열의 맨 아래에 도달하는 지점까지 증가한 다음 스크롤 막대가 표시되어야합니다. 나는이 레이아웃을 달성하기 위해 시도했지만 내가 내부에 더 많은 텍스트를 추가 할 때 다음 기본 테이블의 높이도 inceases http://jsfiddle.net/Q2Ata/1/

: 여기 내 노력을 적용했습니다 지금까지

. 이 문제는이 피들에서 발견 할 수 있습니다. http://jsfiddle.net/Q2Ata/2/

HTML 코드 :

<div class="table"> 
    <div class="table-cell"> 
     <div class="column">Column 1</div> 
    </div> 
    <div class="table-cell"> 
     <div class="column">Column 2</div> 
    </div> 
    <div class="table-cell"> 
     <div class="column"> 
      <div class="container"> 
       <div class="header"> 
        <div class="table-cell">Header</div> 
       </div> 
       <div class="content"> 
        <div class="abc"> 
         text content here ... 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS 코드 :

.table {display:table;width:100%;height:200px;max-height:200px;table-layout:fixed} 
.table-cell{display:table-cell;padding:10px;vertical-align:top} 
.column{border:1px solid #000;height:100%} 
.container{display:table;width:100%} 
.header, .content{display:table-row} 
{display:table-row} 
.container .table-cell{border:1px solid #F00} 
.abc{min-height:50px;padding:10px;border:1px solid #000;height:auto;overflow-y:auto} 

당신은 overflow: auto 작업을하기 위해 당신의 요소에 max-height을 설정해야

Answer 1

당신은해야합니다 최대 높이에 도달하면 막대를 스크롤합니다.

http://jsfiddle.net/Q2Ata/4/