고정 높이와 100 % 높이의 컨테이너 DIV

Question

div가 고정 높이 div에 포함되어있을 때 스크롤 막대의 하단이 보이도록 100 % 높이까지 확장하려고합니다. 누군가 나를 도울 수 있습니까 :)

벨로우즈 레이아웃을 사용하는 경우 .div2 하단의 수직 스크롤 막대는 div1을 200px로 높이기 때문에 .div1이 200px이기 때문에 추측하고 있습니다. 100 % 높이 + 200px가되어야합니다.

.div1은 고정 된 높이가 될 수있는 방법이 있으며 .div2는 나머지 창 높이를 채우기 위해 확장되고 그 높이에 도달하면 오버플로됩니다.

다음은 CSS

html, body { 
     height: 100%; 
    } 
    body { 
     margin: 0; 
     padding: 0; 
     overflow:hidden; 
    } 
    .container 
    { 
     height:100%; 
    } 
    .leftContent { 
     left:0; 
     top:0; 
     padding:0; 
     width:250px; 
     height:100%; 
     color:white; 
     background:blue; 
     overflow:hidden; 
     border:blue solid; 
    } 
    .div1 
    { 
     height:200px; 
     background-color:black; 
     border: red solid; 
    } 
    .div2 
    { 
     overflow:scroll; 
     height:100%; 
     border:yellow solid; 
    } 

입니다 그리고 여기에 HTML입니다.

<div id="container" class="container"> 
    <!-- Start Left Column--> 
    <div id="leftColumn" class="leftContent"> 
     <div id="div1" class="div1"> 
      CONTENT 
     </div> 
     <div id="div2" class="div2"> 
      START START START START START START START START START START START START START START START START 
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
      END END END END END END END END END END END END END END END END END END END END END END END END 
     </div> 
    </div> 
    <!-- End Left Column--> 
</div> 

매우 감사드립니다. 감사

Answer 1

당신이 절대 위치로 바로 .div1에서 .div2를 배치하고 당신이 원하는 것처럼 그 폭과 높이를 확장하는이 방법 .div2

.div2 { 
    overflow:scroll; 
    position: absolute; 
    top: 200px; 
    left: 0; 
    bottom: 0; 
    width: 250px; 
    border:yellow solid; 
} 

이 설정을 시도 (컨테이너의 폭과 높이)

편집

IE 버그 다른 .div2으로 배치하여 고정 될 수있다 DIV -><div><div class="div2"></div></div>

또한이 위치 요소가되어 지금입니다 귀하의 .leftContent 선언

.leftContent { 
    /* other declarations */ 
    position: relative; 
    overflow: hidden; 
} 

Answer 2

업데이트 왼쪽의 콘텐츠 상대를 만든 다음 CSS를

.leftContent { 
    left:0; 
    top:0; 
    padding:0; 
    width:250px; 
    height:100%; 
    color:white; 
    background:blue; 
    overflow:hidden; 
    border:blue solid; 
    position:relative; 
} 
.div1 
{ 
    height:200px; 
    background-color:black; 
    border: red solid; 
    border-width:2px; 
} 
.div2 
{ 
    border-width:2px; 
    position:absolute; 
    top:204px; 
    bottom:2px; 
    overflow-y:scroll; 
    right:0px; 
    border:yellow solid; 
} 

이 CSS를 추가하려고 두 div에 대한 포함 블럭. div2이 나머지 공간을 채우도록 허용하는 것이 중요합니다.

div2이 div1의 테두리와 겹치지 않도록 위치를 알 수 있도록 border-width을 명시 적으로 설정하십시오.

기본적 명시 위치 지정과 함께 leftContent의 나머지 공간을 채우기 위해 DIV2 얻을 절대 위치를 사용했다. overflow을 사용했다면 스크롤 막대를 스크롤하지 않고 스크롤 막대를 얻을 수 있으므로 overflow-y을 사용하지 않아도됩니다.