두 개의 수직 div, 각각 최대 높이로 자동 스크롤

Question

다음 요구 사항을 충족시키고 싶습니다. 이 전 주 용기 내부에 두 개의 컨테이너 (상단과 하단) 있다고 가정 해 봅시다 :

1) 상단과 하단 용기를 스크롤 할 필요가 둘을 경우에만

2) 최고 컨테이너가 최대가 있어야 각 컨테이너의 콘텐츠 오버 플로우 높이가 콘텐츠 성장에 따라 50 %로 제한됩니다.

3) 하단 컨테이너의 최대 높이는 실제로 상단 컨테이너의 높이에 따라 달라집니다. 예를 들어, 위쪽 컨테이너의 높이가 30 %이면 아래쪽 컨테이너의 높이가 70 %보다 커지면 스크롤 할 수 있습니다.

최상위 컨테이너 스크롤 영역에 대해 최대 높이를 50 %로 설정해 보았습니다. 예상대로 50 %가 표시되지 않았습니다.

이전 IE 버전을 지원해야하기 때문에 플렉스 박스를 사용하지 않고이를 수행 할 수있는 방법이 있습니까?

도움을 주시면 대단히 감사하겠습니다.

어떻게 이런 일에 대한

body, 
 
html { 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    height: 90%; 
 
    width: 30%; 
 
    display: table; 
 
} 
 

 
.top { 
 
    padding: 24px; 
 
    background: yellow; 
 
    display: table-row; 
 
} 
 

 
.top div { 
 
    overflow-y: auto; 
 
    max-height: 50%; 
 
} 
 

 
.bottom { 
 
    height: 100%; 
 
    padding: 24px; 
 
    background: tomato; 
 
    display: table-row; 
 
} 
 

 
.bottom div { 
 
    overflow-y: auto; 
 
    height: 100%; 
 
}

<div class="container"> 
 
    <div class="top"> 
 
    <div> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
    </div> 
 
    </div> 
 
    <div class="bottom"> 
 
    <div> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

?

body, 
 
html { 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    height: 300px; 
 
    width: 100%; 
 
    display: table; 
 
} 
 

 
.top { 
 
    padding: 24px; 
 
    background: #000000; 
 
    height: 300px; 
 
    width:40%; 
 
    float:left; 
 
    overflow: auto; 
 
    color:#ffffff; 
 
} 
 

 
.bottom { 
 
    height: 300px; 
 
    padding: 24px; 
 
    background: #ff0000; 
 
    color:#ffffff; 
 
    display: table-row; 
 
    width:40%; 
 
    float:left; 
 
} 
 

 
li{list-style:none;}

<div class="container"> 
 
    <div class="top"> 
 
    <div> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
    </div> 
 
    </div> 
 
    <div class="bottom"> 
 
    <div> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
    </div> 
 
    </div> 
 
</div>

나는 @ andrepaulo의 바이올린에 구축했다.

건배